<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
                     width=device-width,initial-scale=1.0"/>
    <title>物联网平台</title>
    <link rel="shortcut icon" href="/visual/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./lib/element-ui/index.css">
    <script src="lib/element-ui/vue.min.js"></script>
    <script src="lib/element-ui/index.js"></script>
    <script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="lib/jquery-ui/jquery-ui.min.css"/>
    <script type="text/jscript" src="lib/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/jscript" src="lib/transform/jquery.transform2d.js"></script>
    <script type="text/jscript" src="lib/transform/jquery.transformable.js"></script>
    <script type="text/javascript" src="lib/layer/layer.js"></script>

    <link rel="stylesheet" href="lib/spectrum/spectrum.css"/>
    <script type="text/javascript" src="lib/spectrum/spectrum.js"></script>
    <script type="text/jscript" src="lib/wangEditor/wangEditor.min.js"></script>
    <link rel="stylesheet" href="./lib/fontimage/iconfont.css">
    <script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
    <script type="text/javascript" src="./lib/webUploader/webuploader.min.js"></script>
    <script type="text/javascript" src="./echarts/echarts.min.js"></script>
    <script type="text/javascript" src="./echarts/echarts-liquidfill.min.js"></script>
    <script src="js/util.js"></script>
    <script type="text/javascript" src="js/cfg.js"></script>
    <script type="text/javascript" src="../clipboard/clipboard.js"></script>
    <link rel="stylesheet" href="css/cfg.css"/>
</head>
<body>
<div id="app" style="display: none;">
    <el-container>
        <el-header style="text-align:center; height:50px;line-height: 50px;">
            <div class="layui-logo" style="position:fixed;">
                <img style="height: 45px;width:45px; " src="./image/ysiot.jpg">
                <span style="font-size: x-large; vertical-align: middle; letter-spacing: 1px; color: #cee224;">物联网平台</span>
            </div>
            <div style="cursor:pointer;" @click="visualChange=true">
                <span v-text="visual_name" style="font-size: large;"></span>
                <span class="iconfont icon-caret-down"></span>
            </div>
            <div class="head_btns">
                <div class="head_btn" @click="selectMouldVisual()">
                    <div class="el-icon-s-order"></div>
                    模板选择
                </div>
                <div class="head_btn" @click="saveVisual()">
                    <div class="el-icon-s-order"></div>
                    保存
                </div>
                <div class="head_btn" @click="checkModel()">
                    <div class="el-icon-position "></div>
                    预览
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="275px">
                <el-container>
                    <el-aside width="60px" style="background: #4a5053;" class="left-container">
                        <div class="func-list" @click="changetab(0)" :class="{'active':tabmode==0}">
                            <div class="el-icon-document font-icon"></div>
                            <div>基本</div>
                        </div>
                        <div class="func-list" @click="changetab(1)" :class="{'active':tabmode==1}">
                            <div class="el-icon-s-grid font-icon"></div>
                            <div>组件</div>
                        </div>
                        <div class="func-list" @click="changetab(2)" :class="{'active':tabmode==2}">
                            <div class="el-icon-picture font-icon"></div>
                            <div>图库</div>
                        </div>
                        <div class="func-list" @click="changetab(4)" :class="{'active':tabmode==4}">
                            <div class="el-icon-upload font-icon"></div>
                            <div>上传</div>
                        </div>
                    </el-aside>
                    <el-aside width="180px">
                        <div class="element-container" v-show="tabmode==0">
                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-text"></span>
                                    </div>
                                    <div class="intro-txt">
                                        文本
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas" nid="0">
                                        <div class="canvas_text">文本</div>
                                    </div>
                                </div>
                            </div>

                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-textarea"></span>
                                    </div>
                                    <div class="intro-txt">
                                        高级文本
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas high-txt" nid="3">
                                        <div>双击编辑文本</div>
                                    </div>
                                </div>
                            </div>

                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-link"></span>
                                    </div>
                                    <div class="intro-txt">
                                        跳转链接
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas" nid="0">
                                        <a class="canvas_text" href="#">跳转链接</a>
                                    </div>
                                </div>
                            </div>

                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-time"></span>
                                    </div>
                                    <div class="intro-txt">
                                        时间
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas" nid="0" cid="6">
                                        <span></span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- 组件 -->
                        <div class="element-container" v-show="tabmode==1">
                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-label"></span>
                                    </div>
                                    <div class="intro-txt">
                                        展示数据
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas sensorNode" nid="1" cid="12" style="font-size: 20px;">
                                        <div class="canvas_text">0.00</div>
                                    </div>
                                </div>
                            </div>

                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-input"></span>
                                    </div>
                                    <div class="intro-txt">
                                        配置数据
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas sensorNode" nid="1" cid="11"
                                         style="font-size: 20px;background:#999;color:#fff;padding: 10px;border-radius: 3px;">
                                        <div class="canvas_text">0.00</div>
                                    </div>
                                </div>
                            </div>

                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-status"></span>
                                    </div>
                                    <div class="intro-txt">
                                        时间数据
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas sensorNode" nid="1" cid="7"
                                         style="font-size: 20px;background:#999;color:#fff;padding: 10px;border-radius: 3px;">
                                        <div class="canvas_text">00:00</div>
                                    </div>
                                </div>
                            </div>

                            <!--                                <div class="ele-node-info" >
                                                  <div class="ele-sub-c" >
                                                      <div>
                                                          <span class="intro-ico iconfont icon-datatime"></span>
                                                      </div>
                                                      <div class="intro-txt">
                                                          数据时间
                                                      </div>
                                                  </div>
                                                  <div class="ele-content">
                                                      <div class="canvas" nid="1" cid="13">
                                                          <span></span>
                                                      </div>
                                                  </div>
                                              </div>-->
                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-vedio"></span>
                                    </div>
                                    <div class="intro-txt">
                                        视频
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas videoNode" nid="4" video_way="1" video_type="1" video_url="">
                                        <div class="video_content">
                                            <video class="node_video" poster="" controls="" playsinline=""
                                                   webkit-playsinline="" autoplay="">
                                                <source src="" type="rtmp/flv">
                                            </video>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-charts"></span>
                                    </div>
                                    <div class="intro-txt">
                                        图表
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas chartNode" nid="5" cid="1">
                                        <div class="chartStyle"></div>
                                    </div>
                                </div>
                            </div>
                            <!--                                <div class="ele-node-info" >
                                                  <div class="ele-sub-c" >
                                                      <div>
                                                          <span class="intro-ico iconfont icon-map"></span>
                                                      </div>
                                                      <div class="intro-txt">
                                                          地图
                                                      </div>
                                                  </div>
                                                  <div class="ele-content">
                                                      <div class="canvas mapNode" nid="6" >
                                                          <div class="mapStyle">
                                                              <img src="image/map.png">
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>-->

                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-lamp"></span>
                                    </div>
                                    <div class="intro-txt">
                                        指示灯
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas stateNode" nid="8"
                                         cmd="[{'max':'0','min':'0','src':'image/res/state_off.png','send':0},
															{'max':1,'min':1,'src':'image/res/state_on.png','send':0}]">
                                        <img src="">
                                    </div>
                                </div>
                            </div>

                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-switch"></span>
                                    </div>
                                    <div class="intro-txt">
                                        按钮
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas controlNode" nid="9"
                                         cmd="[{'max':'0','min':'0','src':'image/res/off.png','send':1,title:''},
															{'max':1,'min':1,'src':'image/res/on.png','send':0,title:''}]">
                                        <div class="img-title"></div>
                                        <img src="">
                                    </div>
                                </div>
                            </div>

                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-online"></span>
                                    </div>
                                    <div class="intro-txt">
                                        设备状态
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas deviceStateNode" nid="11" w="87px" h="64px"
                                         cmd="[{'max':'19','min':'17','src':'image/res/offline.png','send':0},
															      {'max':16,'min':16,'src':'image/res/online.png','send':0}]">
                                        <img src="image/res/offline.png">
                                    </div>
                                </div>
                            </div>

                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-customize-status"></span>
                                    </div>
                                    <div class="intro-txt">
                                        自定义状态
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas stateNode" nid="8" w="80px" h="50px" cmd="[]">
                                        <img src="image/res/blank.png">
                                    </div>
                                </div>
                            </div>

                            <!--
                                              <div class="ele-node-info" >
                                                  <div class="ele-sub-c" >
                                                      <div>
                                                          <span class="intro-ico iconfont icon-customize-button"></span>
                                                      </div>
                                                      <div class="intro-txt">
                                                          自定义按钮
                                                      </div>
                                                  </div>
                                                  <div class="ele-content">
                                                      <div class="canvas controlNode" nid="9"  w="80px" h="50px"
                                                           cmd="[]">
                                                          <img src="image/res/blank.png">
                                                      </div>
                                                  </div>
                                              </div>
              -->


                            <div class="ele-node-info">
                                <div class="ele-sub-c">
                                    <div>
                                        <span class="intro-ico iconfont icon-liangbei"></span>
                                    </div>
                                    <div class="intro-txt">
                                        液位图
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas chartNode" nid="5" cid="4">
                                        <div class="chartStyle"></div>
                                    </div>
                                </div>
                            </div>

                            <!--                                <div class="ele-node-info" >
                                                  <div class="ele-sub-c" >
                                                      <div>
                                                          <span class="intro-ico iconfont icon-guandao"></span>
                                                      </div>
                                                      <div class="intro-txt">
                                                          管道图
                                                      </div>
                                                  </div>
                                                  <div class="ele-content">
                                                      <div class="canvas pipeLineNode" nid="10" cid="10" >
                                                          <div class="chartStyle"></div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="ele-node-info" >
                                                  <div class="ele-sub-c">
                                                      <div>
                                                          <span class="intro-ico iconfont icon-slider"></span>
                                                      </div>
                                                      <div class="intro-txt">
                                                          滑块
                                                      </div>
                                                  </div>
                                                  <div class="ele-content">
                                                      <div class="canvas sensorNode" nid="12" style="font-size: 20px;" >
                                                          <div class="slider_container" max_length="100">
                                                              <div class="custom-slider-handle ui-slider-handle"></div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="ele-node-info" >
                                                  <div class="ele-sub-c">
                                                      <div>
                                                          <span class="intro-ico iconfont icon-camera"></span>
                                                      </div>
                                                      <div class="intro-txt">
                                                          拍照预览
                                                      </div>
                                                  </div>
                                                  <div class="ele-content">
                                                      <div class="canvas sensorNode" nid="13">
                                                          <div class="camera_picture_container">
                                                              <img src="image/res/blank.png" class="camera_picture" style="width: 100%">
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="ele-node-info" >
                                                  <div class="ele-sub-c">
                                                      <div>
                                                          <span class="intro-ico iconfont icon-branch"></span>
                                                      </div>
                                                      <div class="intro-txt">
                                                          条件跳转
                                                      </div>
                                                  </div>
                                                  <div class="ele-content">
                                                      <div class="canvas" nid="14" cmd="[]" jval="">
                                                          <a class="canvas_text" href="#" style="text-decoration: none;color: inherit;">条件跳转</a>
                                                      </div>
                                                  </div>
                                              </div>-->
                        </div>
                        <!-- 图库 -->
                        <div class="element-container imglibrary self-upload" v-show="tabmode==2">
                            <el-collapse v-model="activeNameImgKun" accordion>
                                <el-collapse-item title="电力元件" name="-1">
                                    <div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
                                                        <g fill="none" fill-rule="evenodd">
                                                            <path fill="#BFBFBF" d="M20 40l15-20H5z"></path>
                                                            <path d="M20 0v19" stroke="#BFBFBF" stroke-width="2"
                                                                  stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="40px">
                                                    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
                                                        <g fill="none" fill-rule="evenodd">
                                                            <path fill="#BFBFBF" d="M20 40l15-20H5z"></path>
                                                            <path d="M20 0v19" stroke="#BFBFBF" stroke-width="2"
                                                                  stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd" stroke-linecap="square">
                                                            <path d="M20 0v19M6 21h28M12 28h16M17 35h6"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="40px">
                                                    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd" stroke-linecap="square">
                                                            <path d="M20 0v19M6 21h28M12 28h16M17 35h6"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="60" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <circle cx="20" cy="30" r="10"></circle>
                                                            <path d="M20 0v59" stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="60px">
                                                    <svg width="40" height="60" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <circle cx="20" cy="30" r="10"></circle>
                                                            <path d="M20 0v59" stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="60" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <circle cx="20" cy="30" r="15"></circle>
                                                            <path d="M20 0v15M20 45v15M10 20l20 20M10 40l20-20"
                                                                  stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="60px">
                                                    <svg width="40" height="60" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <circle cx="20" cy="30" r="15"></circle>
                                                            <path d="M20 0v15M20 45v15M10 20l20 20M10 40l20-20"
                                                                  stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <path d="M20 0v80" stroke-linecap="square"></path>
                                                            <path d="M11 21h18v38H11z"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="80px">
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <path d="M20 0v80" stroke-linecap="square"></path>
                                                            <path d="M11 21h18v38H11z"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <path d="M20 0v38M20 60v20" stroke-linecap="square"></path>
                                                            <path d="M11 21h18v38H11z"></path>
                                                            <path d="M20 48l4-8h-8z"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="80px">
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <path d="M20 0v38M20 60v20" stroke-linecap="square"></path>
                                                            <path d="M11 21h18v38H11z"></path>
                                                            <path d="M20 48l4-8h-8z"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"
                                                         xmlns:xlink="http://www.w3.org/1999/xlink">
                                                        <defs>
                                                            <path id="a" d="M10 20h20v40H10z"></path>
                                                        </defs>
                                                        <g fill="none" fill-rule="evenodd">
                                                            <path d="M20 0v20M20 60v20" stroke="#BFBFBF"
                                                                  stroke-width="2" stroke-linecap="square"></path>
                                                            <use fill="#D9D9D9" xlink:href="#a"></use>
                                                            <path stroke="#BFBFBF" stroke-width="2"
                                                                  d="M11 21h18v38H11z"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="80px">
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"
                                                         xmlns:xlink="http://www.w3.org/1999/xlink">
                                                        <defs>
                                                            <path id="a" d="M10 20h20v40H10z"></path>
                                                        </defs>
                                                        <g fill="none" fill-rule="evenodd">
                                                            <path d="M20 0v20M20 60v20" stroke="#BFBFBF"
                                                                  stroke-width="2" stroke-linecap="square"></path>
                                                            <use fill="#D9D9D9" xlink:href="#a"></use>
                                                            <path stroke="#BFBFBF" stroke-width="2"
                                                                  d="M11 21h18v38H11z"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <path d="M20 0v20M20 60v20" stroke-linecap="square"></path>
                                                            <path d="M11 21h18v38H11z"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="80px">
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <path d="M20 0v20M20 60v20" stroke-linecap="square"></path>
                                                            <path d="M11 21h18v38H11z"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd" stroke-linecap="square">
                                                            <path d="M20 0v15M20 25v15M10 15h20M10 25h20"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="40px">
                                                    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd" stroke-linecap="square">
                                                            <path d="M20 0v15M20 25v15M10 15h20M10 25h20"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="60" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd" stroke-linecap="square">
                                                            <path d="M30 0v20M30 60v20M26 16l8 8M5 20l25 40M26 24l8-8"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="60px" h="80px">
                                                    <svg width="60" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd" stroke-linecap="square">
                                                            <path d="M30 0v20M30 60v20M26 16l8 8M5 20l25 40M26 24l8-8"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <g transform="translate(5)">
                                                                <path d="M15 0v13" stroke-linecap="square"></path>
                                                                <circle cx="15" cy="28" r="15"></circle>
                                                                <path d="M15 21l6 12H9z"></path>
                                                            </g>
                                                            <g transform="translate(5 38)">
                                                                <path d="M15 14v28" stroke-linecap="square"></path>
                                                                <circle cx="15" cy="15" r="15"></circle>
                                                                <path d="M15 15l9-13M6 2l9 13"
                                                                      stroke-linecap="square"></path>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="80px">
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <g transform="translate(5)">
                                                                <path d="M15 0v13" stroke-linecap="square"></path>
                                                                <circle cx="15" cy="28" r="15"></circle>
                                                                <path d="M15 21l6 12H9z"></path>
                                                            </g>
                                                            <g transform="translate(5 38)">
                                                                <path d="M15 14v28" stroke-linecap="square"></path>
                                                                <circle cx="15" cy="15" r="15"></circle>
                                                                <path d="M15 15l9-13M6 2l9 13"
                                                                      stroke-linecap="square"></path>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <circle cx="20" cy="30" r="15"></circle>
                                                            <circle cx="20" cy="50" r="15"></circle>
                                                            <path d="M20 0v15M20 65v15" stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="40px" h="80px">
                                                    <svg width="40" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <circle cx="20" cy="30" r="15"></circle>
                                                            <circle cx="20" cy="50" r="15"></circle>
                                                            <path d="M20 0v15M20 65v15" stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info" style="width: 80px;">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="60" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <circle cx="30" cy="29" r="15"></circle>
                                                            <circle cx="17" cy="52" r="15"></circle>
                                                            <circle cx="43" cy="52" r="15"></circle>
                                                            <path d="M30 0v13M20 68v12M40 68v12"
                                                                  stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="60px" h="80px">
                                                    <svg width="60" height="80" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd">
                                                            <circle cx="30" cy="29" r="15"></circle>
                                                            <circle cx="17" cy="52" r="15"></circle>
                                                            <circle cx="43" cy="52" r="15"></circle>
                                                            <path d="M30 0v13M20 68v12M40 68v12"
                                                                  stroke-linecap="square"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ele-node-info" style="width: 80px;">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="80" height="100" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd" stroke-linecap="square">
                                                            <path d="M39.66 19l-15 25.98M19.66 53.641l-15 25.98M16 39.98l17.32 10M11 48.641l17.32 10"></path>
                                                            <g>
                                                                <path d="M40.5 18.69l15 25.98M60.5 53.33l15 25.98M46.84 49.67l17.32-10M51.84 58.33l17.32-10"></path>
                                                            </g>
                                                            <g>
                                                                <path d="M75 80H45M35 80H5M45 70v20M35 70v20"></path>
                                                            </g>
                                                            <path d="M40 0v19"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="80px" h="100px">
                                                    <svg width="80" height="100" xmlns="http://www.w3.org/2000/svg">
                                                        <g stroke="#BFBFBF" stroke-width="2" fill="none"
                                                           fill-rule="evenodd" stroke-linecap="square">
                                                            <path d="M39.66 19l-15 25.98M19.66 53.641l-15 25.98M16 39.98l17.32 10M11 48.641l17.32 10"></path>
                                                            <g>
                                                                <path d="M40.5 18.69l15 25.98M60.5 53.33l15 25.98M46.84 49.67l17.32-10M51.84 58.33l17.32-10"></path>
                                                            </g>
                                                            <g>
                                                                <path d="M75 80H45M35 80H5M45 70v20M35 70v20"></path>
                                                            </g>
                                                            <path d="M40 0v19"></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 自定义基础图形  -->

                                        <div class="ele-node-info" style="width: 80px;">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="70" height="20" xmlns="http://www.w3.org/2000/svg"
                                                         version="1.1">
                                                        <line x1="0" y1="10" x2="80" y2="10" stroke="#BFBFBF"
                                                              stroke-width="2"/>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="9" w="70px" h="20px">
                                                    <svg width="70" height="20" xmlns="http://www.w3.org/2000/svg"
                                                         version="1.1">
                                                        <line x1="0" y1="10" x2="80" y2="10" stroke="#BFBFBF"
                                                              stroke-width="2"/>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="ele-node-info" style="width: 80px;">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"
                                                         version="1.1">
                                                        <circle cx="40" cy="40" r="38" stroke="#BFBFBF" stroke-width="2"
                                                                fill="#BFBFBF"/>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="80px" h="80px">
                                                    <svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"
                                                         version="1.1">
                                                        <circle cx="40" cy="40" r="38" stroke="#BFBFBF" stroke-width="2"
                                                                fill="#BFBFBF"/>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="ele-node-info" style="width: 80px;">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="70" height="70" xmlns="http://www.w3.org/2000/svg"
                                                         version="1.1">
                                                        <rect width="80" height="80" stroke="#BFBFBF" stroke-width="2"
                                                              fill="#BFBFBF"/>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="80px" h="80px">
                                                    <svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"
                                                         version="1.1">
                                                        <rect width="80" height="80" stroke="#BFBFBF" stroke-width="2"
                                                              fill="#BFBFBF"/>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="ele-node-info" style="width: 80px;">
                                            <div class="ele-sub-c">
                                                <div>
                                                    <svg width="70" height="40" xmlns="http://www.w3.org/2000/svg"
                                                         version="1.1">
                                                        <rect width="70" height="40" stroke="#BFBFBF" stroke-width="2"
                                                              fill="#BFBFBF"/>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="ele-content">
                                                <div class="canvas" nid="2" cid="8" w="70px" h="40px">
                                                    <svg width="70" height="40" xmlns="http://www.w3.org/2000/svg"
                                                         version="1.1">
                                                        <rect width="70" height="40" stroke="#BFBFBF" stroke-width="2"
                                                              fill="#BFBFBF"/>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                        <div class="element-container" v-show="tabmode==3">
                            <div>

                            </div>
                        </div>
                        <div class="element-container self-upload" style="background:#f5f5f5;" v-show="tabmode==4">
                            <el-collapse v-model="activeNameImgKun1" accordion>
                                <div v-for="items in visualMoudelLibraryList">
                                    <el-collapse-item :title="items.name" :name="items.id">
                                        <div class="ele-node-info upload_img_ele" :id="'upload_img_'+item.id"
                                             style="width:54px;" v-for="item in uploadImgs">
                                            <div v-if="item.visualMoudleLibraryId===items.id">
                                                <div class="ele-sub-c">
                                                    <div style="position:relative;">
                                                        <img style="width:40px;height:40px;margin: 2px;"
                                                             :src="item.disImg"/>
                                                        <img :id="item.id" style="width: 10px;height: 10px;"
                                                             src="./image/delete.png" class="deleteUploadImg">
                                                    </div>
                                                </div>
                                                <div class="ele-content">
                                                    <div class="canvas" nid="2">
                                                        <div class="canvas_img">
                                                            <img :src="item.disImg"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-collapse-item>
                                </div>
                            </el-collapse>

                            <div class="uploadBtns">
                                <div class="upload_img mr10" id="upload_img"
                                     style="position: fixed;bottom:56px;left:125px;width: 90px;"
                                     :style="{'opacity':activeNameImgKun1?'1':'0','pointer-events':activeNameImgKun1?'auto':'none'}">
                                    <button tag="" class="el-button el-button--primary">上传图片</button>
                                </div>
                                <div class="upload_img mr11" id="libraryBtnDiv"
                                     style="position: fixed;bottom:10px;left:125px;width: 90px;"
                                     @click="visualMoudleLibraryChange=true">
                                    <button tag="" class="el-button el-button--primary">图库管理</button>
                                </div>
                            </div>
                        </div>
                    </el-aside>
                </el-container>
            </el-aside>
            <el-container>
                <el-main style="overflow: auto;">
                    <div style=" margin-right:240px;">
                        <div id="edit-content-area" style="overflow: auto; ">
                            <div class="edit-container">
                                <div class="guide" id="guide"></div>
                                <div id="canvas_droppable" class="canvas_droppable">
                                    <!-- 拖动画布 -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tool-container" style="background: #fff;width: 240px;border-left:1px solid #d9d9d9;">
                        <div>
                            <el-tabs :stretch="true" v-model="activeName" @tab-click="handleClick">
                                <el-tab-pane label="基本设置" name="first">
                                    <div style="min-height: 400px;padding-bottom: 30px;">
                                        <div class="tool-title padding">功能设置</div>
                                        <div style="padding: 10px ;">
												<span class="el-icon-position" title="移动素材" style="font-size: 28px;margin-right: 10px;cursor: pointer;"
                                                      @click="changeMode" :class={activeBorder:!isdrag} ></span>
                                            <span class="el-icon-rank" title="移动画布" style="font-size: 28px;cursor: pointer;" @click="changeMode" :class={activeBorder:isdrag}> </span>
                                        </div>
                                        <div class="functionDetails">
												<span>
													基础设置
												</span>
                                        </div>
                                        <!-- 画布操作 -->
                                        <div v-show="editType==-1">
                                            <div class="tool-title padding" style="margin-top: 10px;">辅助线</div>
                                            <div class="functionList padding">
                                                <div class="auxiliary" :class="{auxiliaryB : guide =='1'}"
                                                     @click="selectGuideClick"></div>
                                            </div>
                                        </div>
                                        <div v-show="editType==-1">
                                            <div class="tool-title padding" style="margin-top: 10px;">画布宽</div>
                                            <div class="functionList padding">
                                                <input class="input-style" v-model="canvensWidth"
                                                       @input="canvensWidthChange"
                                                       style="margin-right: 15px;width: 100px;text-align:left;padding-left: 10px;">
                                            </div>
                                        </div>
                                        <div v-show="editType==-1">
                                            <div class="tool-title padding" style="margin-top: 10px;">画布高</div>
                                            <div class="functionList padding">
                                                <input class="input-style" v-model="canvensHeight"
                                                       @input="canvensHeightChange"
                                                       style="margin-right: 15px;width: 100px;text-align:left;padding-left: 10px;">
                                            </div>
                                        </div>
                                        <div v-show="editType==-1">
                                            <div class="tool-title padding" style="margin-top: 10px;">画布颜色</div>
                                            <div style="padding: 10px;">
                                                <input id="canvasContainercolor"/>
                                            </div>
                                        </div>
                                        <div v-show="editType==-1">
                                            <div class="tool-title padding" style="margin-top: 10px;">背景颜色</div>
                                            <div style="padding: 10px;">
                                                <input id="backContainercolor"/>
                                            </div>
                                        </div>
                                        <div v-show="editType==-1">
                                            <div class="tool-title padding" style="margin-top: 10px;">设备告警</div>
                                            <div style="padding: 10px;">
                                                <el-switch
                                                        v-model="alarm_enable"
                                                        active-text="开"
                                                        inactive-text="关"
                                                        @change="alarmEnable"
                                                >
                                                </el-switch>
                                            </div>
                                        </div>
                                        <div v-show="editType==-1">
                                            <div class="tool-title padding" style="margin-top: 10px;">登录标题</div>
                                            <div style="padding: 10px;">
                                                <input class="input-style" v-model="loginText"
                                                       style="margin-right: 15px;width: 100px;text-align:left;padding-left: 10px;">
                                            </div>
                                        </div>
                                        <div v-show="editType==-1">
                                            <div class="tool-title padding" style="margin-top: 10px;">登录logo</div>
                                            <div style="padding: 10px;">
                                                <div>
                                                    <div class="upload_img mr10" id="upload_img_logo"
                                                         style="width: 90px;">
                                                        <button class="el-button el-button--small el-button--primary">上传<i
                                                                class="el-icon-upload el-icon--right"></i></button>
                                                    </div>
                                                </div>
                                                <div style="margin-top: 10px;">
                                                    <img class="upload-img-icon" id="upload_img_logo_img"
                                                         :src="loginLogo">
                                                </div>
                                            </div>
                                        </div>
                                        <div v-show="editType==-1">
                                            <div class="tool-title padding" style="margin-top: 10px;">画布背景图片</div>
                                            <div style="padding:10px;display: flex;align-items: center">
                                                <div>
                                                    <div class="upload_img mr10" id="upload_img_bg"
                                                         style="width: 90px;">
                                                        <button class="el-button el-button--small el-button--primary">上传<i
                                                                class="el-icon-upload el-icon--right"></i></button>
                                                    </div>
                                                </div>
                                                <div>
                                                    <button @click="clearBgImg"
                                                            class="el-button el-button--small el-button--danger">清空<i
                                                            class="el-icon-delete el-icon--right"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 元素 -->
                                        <div v-show="editType==0 || editType==14">
                                            <div class="tool-title padding" style="margin-top: 10px;">修改文本</div>
                                            <div class="functionList padding">
                                                <textarea class="base_textarea changeInputVal" @input="textInput"
                                                          v-model="edit_text"></textarea>
                                            </div>
                                        </div>
                                        <div v-show="editType==0 || editType==1 || editType == 3  || editType == 14 || editType == 9">
                                            <div class="tool-title " style="padding: 10px;">文本设置</div>
                                            <div style="padding: 0 10px;">
                                                <div class="basic_text">
                                                    <select class="basic_text_select changeInput" v-model="fontSize"
                                                            @change="fontSizeChange" style-name="font-size">
                                                        <option value="">大小&nbsp;&nbsp;(默认)</option>
                                                        <option value="12px">12</option>
                                                        <option value="13px">13</option>
                                                        <option value="14px">14</option>
                                                        <option value="16px">16</option>
                                                        <option value="18px">18</option>
                                                        <option value="20px">20</option>
                                                        <option value="24px">24</option>
                                                        <option value="36px">36</option>
                                                        <option value="48px">48</option>
                                                        <option value="60px">60</option>
                                                        <option value="72px">72</option>
                                                        <option value="84px">84</option>
                                                        <option value="96px">96</option>
                                                        <option value="100px">100</option>
                                                        <option value="200px">200</option>
                                                        <option value="300px">300</option>
                                                    </select>
                                                    <select class="basic_text_select changeInput" v-model="fontFamily"
                                                            @change="fontFamilyChange" style-name="font-family">
                                                        <option value="">字体&nbsp;&nbsp;(默认)</option>
                                                        <option value="serif">serif</option>
                                                        <option value="Sans-serif">Sans-serif</option>
                                                        <option value="黑体">黑体</option>
                                                        <option value="仿宋">仿宋</option>
                                                        <option value="幼圆">幼圆</option>
                                                        <option value="楷体">楷体</option>
                                                        <option value="隶体">隶体</option>
                                                        <option value="宋体">宋体</option>
                                                        <option value="新宋体">新宋体</option>
                                                        <option value="Microsoft YaHei">微软雅黑</option>
                                                        <option value="华文细黑">华文细黑</option>
                                                        <option value="华文行楷">华文行楷</option>
                                                        <option value="华文彩云">华文彩云</option>
                                                        <option value="华文中宋">华文中宋</option>
                                                        <option value="华文隶书">华文隶书</option>
                                                        <option value="华文新魏">华文新魏</option>
                                                        <option value="方正舒体">方正舒体</option>
                                                        <option value="Arial">Arial</option>
                                                        <option value="Georgia">Georgia</option>
                                                        <option value="Tahoma">Tahoma</option>
                                                        <option value="Verdana">Verdana</option>
                                                        <option value="Monaco">Monaco</option>
                                                        <option value="lcdbq">LCDBQ</option>
                                                    </select>
                                                    <select class="basic_text_select changeInput" v-model="lineHeight"
                                                            @change="lineHeightChange" style-name="line-height">
                                                        <option value="">行高&nbsp;&nbsp;(默认)</option>
                                                        <option value="0">自适应</option>
                                                        <option value="1">1</option>
                                                        <option value="1.2">1.2</option>
                                                        <option value="1.5">1.5</option>
                                                        <option value="1.75">1.75</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                        <option value="5">5</option>
                                                    </select>
                                                    <select class="basic_text_select changeInput" v-model="textalign"
                                                            @change="textAlignChange" style-name="text-align">
                                                        <option value="">对齐&nbsp;&nbsp;(默认)</option>
                                                        <option selected="selected" value="left">居左</option>
                                                        <option value="center">居中</option>
                                                        <option value="right">居右</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-show="editType==0|| editType==1 || editType == 3 || editType==2 || editType == 5 || editType == 14 || editType == 9">
                                            <div class="tool-title " style="padding: 10px;">文本样式</div>
                                            <div style="padding: 0 10px;">
                                                <div class="basic_text">
                                                    <button class="basic_text_select textStyleBtn" id="basicColor"
                                                            style-name="color">A
                                                    </button>
                                                    <button class="basic_text_select textStyleBtn" v-model="fontWeight"
                                                            @click="fontWeightChange">B
                                                    </button>
                                                    <button class="basic_text_select textStyleBtn" v-model="oblique"
                                                            @click="obliqueChange">I
                                                    </button>
                                                    <button class="basic_text_select textStyleBtn" v-model="underline"
                                                            @click="underlineChange">U
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-show="editType==9">
                                            <div class="tool-title " style="padding: 10px;">
                                                文本位置
                                            </div>
                                            <div style="padding: 0 10px;">
                                                <span style="padding-right: 5px;">X&nbsp;</span>
                                                <input class="input-style" v-model="canvensxImgTitle" @input="canvensxChangeImgTitle"
                                                       style="margin-right: 15px;">
                                                <span style="padding-right: 5px;">Y&nbsp;</span>
                                                <input class="input-style" v-model="canvensyImgTitle" @input="canvensyChangeImgTitle">
                                            </div>
                                        </div>
                                        <div v-show="editType==3">
                                            <div class="tool-title " style="padding: 10px;">
                                                高级文本设置
                                            </div>
                                            <div style="padding:0 10px;">
                                                <div class="text_toolbar"></div>
                                            </div>
                                        </div>
                                        <div v-show="editType==0 || editType == 1 || editType == 3 || editType == 5 || editType == 8 || editType == 9 || editType == 14">
                                            <div class="tool-title " style="padding: 10px;">背景颜色</div>
                                            <div style="padding-left: 10px;">
                                                <input id="backcolor"/>
                                            </div>
                                        </div>
                                        <div v-show="editType>=0 && editType <= 10 && editType!= 7 || editType == 12 || editType == 13 || editType == 14">
                                            <div class="tool-title " style="padding: 10px;">旋转</div>
                                            <div style="padding: 0 10px;overflow: hidden;position: relative;">
                                                <div id="rotate_slide" class="slide_node">
                                                    <div id="rotate_node" class="slide_line"></div>
                                                </div>
                                                <input class="slide_size" v-model="rotate" @input="rotateChange">
                                            </div>
                                        </div>
                                        <div class="base-form-group" v-show="editType == 10">
                                            <label class="el-form-item__label" style="width: 80px;">流动方向</label>
                                            <div class="el-form-item__content" style="margin-left: 80px;">
                                                <select class="el-input__inner" v-model="speed_dir"
                                                        @change="rotateSpeedChange" style-name="text-align">
                                                    <option selected="selected" value="r">正向</option>
                                                    <option value="l">反向</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div v-show="editType == 10">
                                            <div class="tool-title " style="padding: 10px;">流动速度</div>
                                            <div style="padding: 0 10px;overflow: hidden;position: relative;">
                                                <div class="slide_node">
                                                    <div id="rotate_speed" class="slide_line"></div>
                                                </div>
                                                <input class="slide_size" v-model="rotate_speed"
                                                       @input="rotateSpeedChange">
                                            </div>
                                        </div>
                                        <div v-show="editType == 5 && cid == 4 ">
                                            <div class="tool-title " style="padding: 10px;">液位最大值</div>
                                            <div style="padding-left: 10px;">
                                                <input class="el-input__inner" v-model="chartMax"
                                                       placeholder="液位最大值" style="width:75%;"
                                                       @input="chartMaxInput">
                                            </div>
                                        </div>
                                        <div v-show="editType == 5 && cid == 4 ">
                                            <div class="tool-title " style="padding: 10px;">边框</div>
                                            <div style="padding-left: 10px;">
                                                <select class="el-input__inner" v-model="columnVal"
                                                        @change="changeChartColumn" style="width:75%;">
                                                    <option selected="selected" value="0">无边框</option>
                                                    <option value="1">有边框</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div v-show="editType>=0 && editType <= 11 && editType!= 7 || editType == 12 || editType == 13 || editType == 14">
                                            <div class="tool-title " style="padding: 10px;">大小</div>
                                            <div style="padding: 0 10px;">
                                                <span style="padding-right: 5px;">宽</span>
                                                <input class="input-style" v-model="canswidth" @input="canswidthChange"
                                                       style="margin-right: 15px;">
                                                <span style="padding-right: 5px;">高</span>
                                                <input class="input-style" v-model="cansheight"
                                                       @input="cansheightChange">
                                            </div>
                                        </div>
                                        <div v-show="editType>=0 && editType <= 11 && editType!= 7 || editType == 12 || editType == 13 || editType == 14">
                                            <div class="tool-title " style="padding: 10px;">位置</div>
                                            <div style="padding: 0 10px;">
                                                <span style="padding-right: 5px;">X&nbsp;</span>
                                                <input class="input-style" v-model="canvensx" @input="canvensxChange"
                                                       style="margin-right: 15px;">
                                                <span style="padding-right: 5px;">Y&nbsp;</span>
                                                <input class="input-style" v-model="canvensy" @input="canvensyChange">
                                            </div>
                                        </div>

                                        <div v-show="editType == 2 || editType == 9 || editType == 8 || editType == 11 ">
                                            <div class="tool-title " style="padding: 10px;">图片显示</div>
                                            <div style="padding: 0 10px;">
                                                <button @click="imgScale(0)"
                                                        class="el-button el-button--small el-button--primary">原比例
                                                </button>
                                                <button @click="imgScale(1)"
                                                        class="el-button el-button--small el-button--primary">缩放
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="数据绑定" name="second">
                                    <div class="nodeConfig" v-show="editType==0|| editType ==1 || editType==4 ||editType==5
																		||editType==6 || nid==8 || nid==9 || nid==10 || nid==11
																		|| nid==12 || nid == 14">

                                        <div class="functionDetails" v-show="nid==0 && cid!= 6">
												<span>
													事件绑定
												</span>
                                        </div>

                                        <div class="form-group padding" v-show="nid==0 && cid!= 6">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">跳转方式</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="jty" placeholder="请选择类型"
                                                               @change="jumptype">
                                                        <el-option :value="1" label="弹窗展示"></el-option>
                                                        <el-option :value="2" label="外链跳转"></el-option>
                                                        <el-option :value="3" label="组态内跳转"></el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="functionDetails" v-show="nid==8 || nid==9">
												<span>
													功能设置
												</span>
                                        </div>

                                        <div class="form-group padding" v-show="nid==8 || nid==9">
                                            <div class="el-form-item">
                                                <div class="el-form-item__content">
                                                    <label class="el-form-item__label"
                                                           style="width: 80px;">功能设置</label>
                                                    <div class="el-form-item__content"
                                                         style="margin-left: 80px;text-align: center;">
                                                        <el-button type="primary" @click="funcedit" icon="el-icon-edit"
                                                                   circle></el-button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="functionDetails" v-show="nid==14">
												<span>
													条件配置
												</span>
                                        </div>
                                        <div class="form-group padding" v-show="nid==14">
                                            <div class="el-form-item">
                                                <div class="el-form-item__content">
                                                    <label class="el-form-item__label"
                                                           style="width: 80px;">条件配置</label>
                                                    <div class="el-form-item__content"
                                                         style="margin-left: 80px;text-align: center;">
                                                        <el-button type="primary" @click="switchLinkEdit"
                                                                   icon="el-icon-edit" circle></el-button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group padding"
                                             v-show="nid==0 && cid!= 6 && jty != 3 && jty != 1">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">跳转地址</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <input class="el-input__inner" v-model="jurl"
                                                           placeholder="http://地址" @input="urlInput">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group padding"
                                             v-show="nid==0 && cid!= 6 &&  (jty == 3 || jty == 1)">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">跳转地址</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="visual_select_code" placeholder="请选择类型"
                                                               @change="urlInputSelect">
                                                        <el-option
                                                                v-for="item in visualList"
                                                                :key="item.keycode"
                                                                :label="item.name"
                                                                :value="item.keycode">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group padding" v-show=" nid==0 && cid!= 6 &&  jty==1">
                                            <div class="tool-title " style="padding: 10px;">大小</div>
                                            <div style="padding: 0 10px;">
                                                <span style="padding-right: 5px;">宽</span>
                                                <input class="input-style" v-model="visual_select_width"
                                                       @input="urlInputSelectWidth" style="margin-right: 15px;">
                                                <span style="padding-right: 5px;">高</span>
                                                <input class="input-style" v-model="visual_select_height"
                                                       @input="urlInputSelectHeight">
                                            </div>
                                        </div>
                                        <div class="functionDetails" v-show="nid==5 && cid != 4 ">
												<span>
													图表设置
												</span>
                                        </div>

                                        <div class="form-group sensorSelect padding" v-show="nid==5 && cid != 4 ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">图表类型</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="cid" placeholder="请选择类型"
                                                               @change="changeChartData">
                                                        <el-option :value="1" label="折线图"></el-option>
                                                        <el-option :value="2" label="柱形图"></el-option>
                                                        <el-option :value="3" label="仪表盘"></el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group padding" v-show="nid==5 && cid == 3 ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">量程值</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <input class="el-input__inner" v-model="pimax"
                                                           placeholder="设置范围最大值" @input="settingmaxvalue">
                                                </div>
                                            </div>
                                        </div>
                                        <div v-show="editType == 5 && cid == 4 ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label"
                                                       style="width: 90px;">液位最大值</label>
                                                <div class="el-form-item__content" style="margin-left: 90px;">
                                                    <input class="el-input__inner" v-model="chartMax"
                                                           placeholder="液位最大值" @input="chartMaxInput">
                                                </div>
                                            </div>
                                        </div>
                                        <div v-show="nid==1 && (cid == 11||cid==7) ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 90px;">弹框标题</label>
                                                <div class="el-form-item__content" style="margin-left: 90px;">
                                                    <input class="el-input__inner" v-model="textTitle"
                                                           placeholder="弹框标题" @input="chartTextTitle">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group padding" v-show="nid==12">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">行程</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <input class="el-input__inner" v-model="slider_length"
                                                           placeholder="设置行程最大值" @input="setSliderLength">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="functionDetails"
                                             v-show="nid==6 || nid==5 || nid==4 || nid==1  || nid==8 ||nid==9 || nid==10 || nid==11  || nid==12 || nid==14">
												<span>
													数据源
												</span>
                                        </div>
                                        <div class="form-group sensorSelect padding" v-show=" nid==4 ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">选择方式</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="video_way" placeholder="请选择方式"
                                                               @change="changeVideoWay">
                                                        <el-option :value="'1'" label="手动输入"></el-option>
                                                        <el-option :value="'2'" label="系统选择"></el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group sensorSelect padding" v-show=" nid==4 ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">选择类型</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="video_type" placeholder="请选择类型"
                                                               @change="changeVideoType">
                                                        <el-option :value="'1'" label="flv"></el-option>
                                                        <el-option :value="'2'" label="hls"></el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group videoSelect padding"
                                             v-show="(nid==6 || nid==5|| ( nid==4&& video_way=='2') || nid==1  || nid==8 || nid==9 || nid==10 || nid==11 || nid==12 || nid==14) && model=='0' ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">地块</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="green_house_id" placeholder="请选择"
                                                               @change="initNodeList">
                                                        <el-option
                                                                v-for="item in greenHouseIdList"
                                                                :key="item.GreenHouseId"
                                                                :label="item.GreenHouseName"
                                                                :value="item.GreenHouseId"
                                                        >
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group videoSelect padding"
                                             v-show="(nid==6 || nid==5 || (nid==4 && video_way=='2') || nid==1 || nid==8  || nid==9 || nid==10 || nid==11 || nid==12 || nid==14) && model=='0' ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">设备</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="node_id" placeholder="请选择"
                                                               @change="changeNodeData">
                                                        <el-option
                                                                v-for="item in nodeList"
                                                                :key="item.DevCode"
                                                                :label="item.DevName"
                                                                :value="item.DevCode"
                                                        >
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group sensorSelect padding"
                                             v-show=" (nid==1 || nid==5 || nid==10 || nid==8 || nid==12 || nid==14) && !(cid==7||cid==11||cid==12||cid==4) ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">属性</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="sensor_id_father" placeholder="请选择"
                                                               @change="changeSensorData">
                                                        <el-option
                                                                v-for="item in sensorList"
                                                                :key="item.FieldName"
                                                                :label="item.DisplayName"
                                                                :value="item.FieldName">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group sensorSelect padding" v-show=" nid==9 ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">属性</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="sensor_id_father" placeholder="请选择"
                                                               @change="changeSensorData">
                                                        <el-option
                                                                v-for="item in buttonList"
                                                                :key="item.FieldName"
                                                                :label="item.DisplayName"
                                                                :value="item.FieldName">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group sensorSelect padding" v-show=" nid==4 && video_way=='1'">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 90px;">输入url</label>
                                                <div class="el-form-item__content" style="margin-left: 90px;">
                                                    <input class="el-input__inner" v-model="video_url"
                                                           placeholder="输入url" @input="changeVideoUrl">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group sensorSelect padding"
                                             v-show=" nid==4 && video_way=='2' && model=='1'">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">设备</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="video_id" placeholder="请选择"
                                                               @change="changeVideoData">
                                                        <el-option
                                                                v-for="item in videoList"
                                                                :key="item.DevCode"
                                                                :label="item.DevName"
                                                                :value="item.DevCode"
                                                        >
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group sensorSelect padding"
                                             v-show=" (nid==1 || nid==5  || nid==9 || nid==10) && (cid==11) ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">属性</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="sensor_id_father" placeholder="请选择"
                                                               @change="changeSensorData">
                                                        <el-option
                                                                v-for="item in sensorListc11"
                                                                :key="item.FieldName"
                                                                :label="item.DisplayName"
                                                                :value="item.FieldName">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group sensorSelect padding"
                                             v-show=" (nid==1 || nid==5  || nid==9 || nid==10) && (cid==12 || cid==4) ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">属性</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="sensor_id_father" placeholder="请选择"
                                                               @change="changeSensorData">
                                                        <el-option
                                                                v-for="item in sensorListc12"
                                                                :key="item.FieldName"
                                                                :label="item.DisplayName"
                                                                :value="item.FieldName">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group sensorSelect padding"
                                             v-show=" (nid==1 || nid==5 || nid==9 || nid==10) && (cid==7) ">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">属性</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="sensor_id_father" placeholder="请选择"
                                                               @change="changeSensorData">
                                                        <el-option
                                                                v-for="item in sensorListc7"
                                                                :key="item.FieldName"
                                                                :label="item.DisplayName"
                                                                :value="item.FieldName">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group sensorSelect padding"
                                             v-show="child_sensor===true">
                                            <div class="el-form-item">
                                                <label class="el-form-item__label" style="width: 80px;">子属性</label>
                                                <div class="el-form-item__content" style="margin-left: 80px;">
                                                    <el-select v-model="sensor_id" placeholder="请选择"
                                                               @change="changeChildSensorData">
                                                        <el-option
                                                                v-for="item in childSensorList"
                                                                :key="item.FieldName"
                                                                :label="item.DisplayName"
                                                                :value="item.FieldName">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>

                    <!-- 右键菜单 -->
                    <div id="opration" class="opration" style="display:none;">
                        <div class="canvas-con-operates"><!-- 组合框操作按钮 -->
                            <div title="左对齐" class="canvas-con-operate dir_operate" tag="3">
                                <span class="iconfont icon-left"></span>
                            </div>
                            <div title="上对齐" class="canvas-con-operate dir_operate" tag="0">
                                <span class="iconfont icon-up"></span>
                            </div>
                            <div title="右对齐" class="canvas-con-operate dir_operate" tag="1">
                                <span class="iconfont icon-right"></span>
                            </div>
                            <div title="下对齐" class="canvas-con-operate dir_operate" tag="2">
                                <span class="iconfont icon-down"></span>
                            </div>
                        </div>
                        <div class="opration_item item_bt" id="copyNode">复制</div>
                        <div class="opration_item item_disabled" id="upMoveOne">上移一层</div>
                        <div class="opration_item item_bt item_disabled" id="downMoveOne">下移一层</div>
                        <div class="opration_item item_bt item_disabled" id="upMoveAll">置于顶层</div>
                        <div class="opration_item item_bt item_disabled" id="downMoveAll">置于底层</div>
                        <div class="opration_item" id="deleteNode">删除</div>
                    </div>
                    <div id="oprationEdit" class="opration" style="display:none;">
                        <div class="opration_item item_disabled" id="pasteNode">粘贴</div>
                    </div>

                </el-main>
            </el-container>
        </el-container>
    </el-container>

    <el-dialog title="功能设置" :visible.sync="dialogTableVisible">
        <div class="imageDiv">
            <table class="el-table__header-wrapper">
                <thead class="lpro-thead">
                <tr>
                    <td>返回值</td>
                    <td>图片</td>
                    <td>名称</td>
                    <td>发送值</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody class="has-gutter">
                <tr :model="item" v-for="(item,index) in dattribute" :key="index">
                    <td>
                        <el-input v-model="item.min" placeholder="返回值"></el-input>
                    </td>
                    <td>
                        <img style="vertical-align: middle;width:50px;" :src="item.src">
                        <el-button type="success" @click="showImageSelect(index)" style="margin-left:2px;" size="small"
                                   icon="el-icon-search" circle></el-button>
                    </td>
                    <td>
                        <el-input v-model="item.title" placeholder="名称"></el-input>
                    </td>
                    <td>
                        <el-input v-model="item.send" placeholder="发送值"></el-input>
                    </td>
                    <td>
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteImageSelect(index)"
                                   circle></el-button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <span slot="footer" class="dialog-footer">
				    <el-button @click="dialogTableVisible = false">取 消</el-button>
				    <el-button type="primary" @click="addImageState">增加</el-button>
				    <el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
    </el-dialog>

    <el-dialog title="条件配置" :visible.sync="switchLinkDialogTableVisible">
        <div class="imageDiv">
            <table class="el-table__header-wrapper switch-link-table">
                <thead>
                <tr>
                    <td style="width: 10%">是否为数字</td>
                    <td style="width: 15%">字符串值</td>
                    <td style="width: 15%">最小值(>=)</td>
                    <td style="width: 15%">最大值(&lt;)</td>
                    <td style="width: 15%">跳转方式</td>
                    <td style="width: 20%">跳转链接</td>
                    <td style="width: 10%">操作</td>
                </tr>
                </thead>
                <tbody>
                <tr :model="item" v-for="(item,index) in linkAttribute" :key="index">
                    <td>
                        <el-checkbox v-model="item.is_num"></el-checkbox>
                    </td>
                    <td>
                        <el-input v-model="item.val" v-show='item.is_num == false' placeholder="字符串值"></el-input>
                    </td>
                    <td>
                        <el-input v-model="item.min" v-show='item.is_num == true' placeholder="最小值"></el-input>
                    </td>
                    <td>
                        <el-input v-model="item.max" v-show='item.is_num == true' placeholder="最大值"></el-input>
                    </td>
                    <td>
                        <el-select v-model="item.jty" placeholder="请选择类型" @change="linkJumpType(event,item,index)">
                            <el-option :value="1" label="弹窗展示"></el-option>
                            <el-option :value="2" label="外链跳转"></el-option>
                            <el-option :value="3" label="组态内跳转"></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-select v-model="item.visual_select_code" v-show="item.jty != 2" placeholder="请选择类型"
                                   @change="linkSelect(event,item,index)">
                            <el-option
                                    v-for="vitem in visualList"
                                    :key="vitem.keycode"
                                    :label="vitem.name"
                                    :value="vitem.keycode">
                            </el-option>
                        </el-select>
                        <input class="el-input__inner" v-model="item.jurl" v-show="item.jty == 2"
                               placeholder="http://地址" @input="linkInput(index,event)">
                        <div style="padding: 5px 10px;" v-show="item.jty == 1">
                            <span>宽</span>
                            <input class="input-style" v-model="item.visual_select_width"
                                   @input="linkSelectWidth(index,event)">
                            <span>高</span>
                            <input class="input-style" v-model="item.visual_select_height"
                                   @input="linkSelectHeight(index,event)">
                        </div>
                    </td>
                    <td>
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="linkDelete(index)"
                                   circle></el-button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <span slot="footer" class="dialog-footer">
				    <el-button @click="switchLinkDialogTableVisible = false">取 消</el-button>
				    <el-button type="primary" @click="addSwitchLinkRow">增加</el-button>
				    <el-button type="primary" @click="linkSave">确 定</el-button>
				</span>
    </el-dialog>

    <el-dialog title="图片列表" :visible.sync="dialogImageVisible">
        <div class="imageDiv">
            <el-collapse v-model="activeNameImgKun2" accordion>
                <el-collapse-item v-for="(item,index) in visualPartList" :title="item.name" :name="index">
                    <div class="ele-node-info upload_img_ele" v-for="(sitem,index) in imgObjList" style="width:46px;"
                         v-if="item.code ==sitem.moudle_type ">
                        <img class="upload-img-icon" @click="selectImg(sitem.disImg)" :src="sitem.disImg">
                    </div>
                </el-collapse-item>

                <!--        <el-collapse-item title="自定义图片" name="0">
          <img v-for="item in uploadImgs" class="upload-img-icon" @click="selectImg(item.disImg)" :src="item.disImg">
        </el-collapse-item>-->
                <div v-for="items in visualMoudelLibraryList" name="0">
                    <el-collapse-item :title="items.name" :name="items.id">
                        <div class="ele-node-info upload_img_ele" :id="'upload_img_'+item.id" style="width:54px;"
                             v-for="item in uploadImgs">
                            <div v-if="item.visualMoudleLibraryId===items.id">
                                <div class="ele-sub-c">
                                    <div style="position:relative;">
                                        <img style="width:40px;height:40px;margin: 2px;" :src="item.disImg"
                                             @click="selectImg(item.disImg)"/>
                                    </div>
                                </div>
                                <div class="ele-content">
                                    <div class="canvas" nid="2">
                                        <div class="canvas_img">
                                            <img :src="item.disImg"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-collapse-item>
                </div>
            </el-collapse>
        </div>

        <span slot="footer" class="dialog-footer">
				    <el-button @click="dialogImageVisible = false">取 消</el-button>
				    <el-button type="primary" @click="dialogImageVisible = false">确 定</el-button>
				</span>
    </el-dialog>

    <el-dialog title="组态切换" :visible.sync="visualChange">
        <div>
            <el-row :gutter="12">
                <el-col :span="8" v-for="item in visualList " style="margin-bottom:3px;">
                    <el-card shadow="hover">
                        <span style="cursor: pointer;color:#47a2ff;" @click="modifyInfo(item.id)">{{ item.name }}</span>
                        <el-button @click="deleteVisual(item.id)" style="float:right;" size="mini" type="danger"
                                   icon="el-icon-delete" circle
                                   v-show="item.parentId!=null&& item.keycode!=keyCode"></el-button>
                        <el-tooltip class="item" effect="dark" content="切换" placement="top">
                            <el-button @click="changeVisual(item.keycode)" style="float:right;margin-right:10px;"
                                       size="mini" type="success" icon="el-icon-position" circle></el-button>
                        </el-tooltip>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12" :span="16" v-show="addColumn">
                <el-col :span="10" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin:10px;">
                    <el-form ref="form" :model="form" label-width="50px" style="margin-top:10px;">
                        <el-form-item label="名称">
                            <el-input placeholder="请输入名称" v-model="form.name" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input type="number" placeholder="请输入排序" v-model="form.seq"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即保存</el-button>
                            <el-button @click="addColumn=false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <span slot="footer" class="dialog-footer">
				    <el-button @click="visualChange = false">取 消</el-button>
				    <el-button type="primary" @click="addnew">新增</el-button>
				    <el-button type="primary" @click="visualChange = false">确 定</el-button>
				</span>
    </el-dialog>

    <el-dialog title="图库管理" :visible.sync="visualMoudleLibraryChange">
        <div>
            <el-row :gutter="12">
                <el-col :span="8" v-for="item in visualMoudelLibraryList " style="margin-bottom:3px;">
                    <el-card shadow="hover">
                        <span style="cursor: pointer;color:#47a2ff;"
                              @click="modifyInfoLibrary(item.id)">{{ item.name }}</span>
                        <el-button @click="deleteMoudelLibrary(item.id)" style="float:right;" size="mini" type="danger"
                                   icon="el-icon-delete" circle></el-button>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12" :span="16" v-show="addLibraryColumn">
                <el-col :span="10" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin:10px;">
                    <el-form ref="form" :model="form" label-width="50px" style="margin-top:10px;">
                        <el-form-item label="名称">
                            <el-input placeholder="请输入名称" v-model="form.name" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input type="number" placeholder="请输入排序" v-model="form.seq"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmitLibrary">立即保存</el-button>
                            <el-button @click="addLibraryColumn=false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <span slot="footer" class="dialog-footer">
				    <el-button @click="visualMoudleLibraryChange = false">取 消</el-button>
				    <el-button type="primary" @click="addnewLibrary">新增</el-button>
				    <el-button type="primary" @click="visualMoudleLibraryChange = false">确 定</el-button>
				</span>
    </el-dialog>
    <el-dialog title="组态分享" :visible.sync="visualDisplayShareShow">
        <div>
            <el-row :gutter="12" :span="24" v-show="visualDisplayShareShow">
                <el-col :span="23" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin:10px;">
                    <el-form ref="visualDisplayShareForm" :model="visualDisplayShareForm" label-width="100px"
                             style="margin-top:10px;">
                        <el-form-item label="链接" v-show="visualDisplayShareForm.close == false">
                            <el-input placeholder="链接名称" :readonly='true' :title='visualDisplayShareForm.url'
                                      v-model="visualDisplayShareForm.url" id="vdsfURL"></el-input>
                            <el-button class='copyBtn' type="primary" size="mini" data-clipboard-action="copy"
                                       data-clipboard-target="#vdsfURL">复制链接
                            </el-button>
                        </el-form-item>
                        <el-form-item label="密码" v-show="visualDisplayShareForm.close == false">
                            <el-input type="text" placeholder="密码" :readonly='true'
                                      :title='visualDisplayShareForm.secret' v-model="visualDisplayShareForm.secret"
                                      id="vdsfSecret"></el-input>
                            <el-button class='copyBtn' type="primary" size="mini" data-clipboard-action="copy"
                                       data-clipboard-target="#vdsfSecret">复制密码
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="visualDisplayShareForm.close" label="关闭分享"
                                         @change="visualDisplayShareClose"></el-checkbox>
                            <el-checkbox v-model="visualDisplayShareForm.secret != null" label="需要密码"
                                         @change="visualDisplayShareNeedSecret"
                                         v-show="visualDisplayShareForm.close == false"></el-checkbox>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </el-dialog>


    <el-dialog title="模板选择" :visible.sync="selectMould">
        <div>
            <el-row :gutter="12">
                <el-col :span="8" v-for="item in initVisualSelectModelList " style="margin-bottom:3px;">
                    <el-card shadow="hover">
                        <span style="cursor: pointer;color:#47a2ff;" @click="modifyInfo(item.id)">{{ item.name }}</span>
                        <el-tooltip class="item" effect="dark" content="预览" placement="top">
                            <el-button @click="showVisual(item.keycode)" style="float:right;margin-right:10px;"
                                       size="mini" type="info" icon="el-icon-search" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="应用" placement="top">
                            <el-button @click="applyModelVisual(item.keycode)" style="float:right;margin-right:10px;"
                                       size="mini" type="success" icon="el-icon-position" circle></el-button>
                        </el-tooltip>

                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="12" :span="16" v-show="addColumn">
                <el-col :span="10" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin:10px;">
                    <el-form ref="form" :model="form" label-width="50px" style="margin-top:10px;">
                        <el-form-item label="名称">
                            <el-input placeholder="请输入名称" v-model="form.name" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input type="number" placeholder="请输入排序" v-model="form.seq"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即保存</el-button>
                            <el-button @click="addColumn=false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
</body>
<script type="text/javascript">
    // 默认加载
    layer.load();
    var id
    id = getQueryString('mainid');
    var keyCode = getQueryString('keyCode');
    let devCodeList = localStorage.getItem('devCodeList').split(',')

    let token = "";
    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                id: '',
                alarm_enable: false,
                activeName: 'first', 		// x选项卡
                activeNameImgKun: 0,     // 图库系统
                activeNameImgKun1: '',     // 图片库系统
                activeNameImgKun2: 0,
                editType: '-1',
                form: {
                    name: '',
                    seq: ''
                },
                edit_text: '',
                fontSize: '',
                fontFamily: '',
                lineHeight: '',
                textalign: '',
                fontWeight: '0',
                oblique: '0',
                underline: '0',
                rotate: '0',
                rotate_speed: '0',//液体流动速度
                speed_dir: 'r',   //液体流动方向
                canswidth: '0',
                cansheight: '0',
                canvensx: '0',
                canvensy: '0',
                canvensxImgTitle: '0',
                canvensyImgTitle: '0',
                guide: 1,
                canvensWidth: '',
                canvensHeight: '',
                loginText: '',
                loginLogo: './image/ysiot.jpg',
                isdrag: false,
                tabmode: 0,
                uploadImgs: [],   // 上传的图标列表
                initUpload: '',
                uploadImgCount: 0,
                sensorMap: {},
                videoMap: {},
                nid: '',		//当前选择对象n类型
                videoList: [],
                sensorListc12: [],
                sensorListc11: [],
                sensorListc7: [],
                sensorList: [],
                buttonList: [],
                sensorLMap: new Map(),
                nodeList: [],
                greenHouseIdList: [],
                sceneList: [],
                visualList: [],
                sensor_id: '',
                sensor_id_father: '',
                node_id: '',		 // 设备id
                scene_id: '',  // 场景id
                farm_id: '',  // 园区id
                green_house_id: '',  // 地块id
                cid: '',
                video_id: '',
                video_way: '',
                video_type: '1',
                video_url: '',
                bdMap: {}, //节点id-map对象
                chartMap: {}, //节点id-chart对象
                jty: '',  // 跳转方式
                jurl: '',  // 跳转url
                dialogTableVisible: false,  // 弹窗显示
                selectMould: false,  // 选择弹窗显示
                visualChange: false,  		 // 组态切换
                deviceChange: false,  		 // 设备选择
                dattribute: [],   		// 设备配置属性
                dialogImageVisible: false,   // 图标列表
                tableIndex: '', 		// 属性设置页面
                visualPartList: '',    // 虚拟组件
                imgObjList: '',        // 组件图片列表
                chartMax: '',         // 液面最大值
                textTitle: '',// 	配置型弹窗标题
                columnVal: '0',	   // 栏目值
                pimax: '',			   // 仪表盘最大值
                unit: '',			   // 折线图和柱状图最大值
                visual_name: '',     // 组态名称
                isMould: '',     // 是否为模版
                model: '',     // 模式 ：0独立 1模型
                devCode: '',     // 模板id
                type: '',     // 模板类型
                addColumn: false,
                addLibraryColumn: false,
                visual_select_code: '', // 组态内跳转
                visual_select_width: '0', // 弹窗宽
                visual_select_height: '0', // 弹窗宽
                isModbus: false,
                device_slave_id: '',
                slider_length: '',
                tableData: [],
                visualMoudleLibraryChange: false,
                visualMoudelLibraryList: [],
                initVisualSelectModelList: [],
                visualDisplayShareShow: false,
                visualDisplayShareForm: {
                    url: '',
                    secret: '',
                    isClose: false
                },
                linkAttribute: [],   			// 条件跳转链接配置属性
                switchLinkDialogTableVisible: false,   // 条件跳转链接弹窗显示
                index_html: "",
                loadingCommon: false,
                loadingPrivate: false,
                child_sensor:false,      //子属性
                childSensorList:[] , //子属性列表
                childSensorMap:new Map(), //子属性map
            };
        },
        methods: {
            loginOut() {
                let token = localStorage.getItem('TOKEN')
                if (!token) {
                    window.location.href = "/login";
                }
            },
            handleChange() {
                var that = this;
                commonAjax('GET', baseurl + 'yesiot/moudle/visual?parentId=' + id, {}, function (e) {
                    if (e) {
                        console.log(e.datas)
                        that.imgObjList = e.datas;
                        that.uploadImgs = e.datas;
                        setTimeout(function () {
                            cfg.activeMenuNode($(".upload_img_ele"));
                        }, 500);
                    }
                });
            },
            handleClick(tab, event) {

            },
            changeVisual(a) {
                window.location.href = "./index.html?keyCode=" + a + "&mainid=" + id;
            },
            applyModelVisual(a) {
                var that = this;
                this.$confirm('应用模板会删除已设置的组态，确定应用吗？').then(_ => {
                    commonAjax('GET', baseurl + 'yesiot/visual/display/applyModelVisual?keyCode=' + keyCode + '&apply=' + a, {}, function (e) {
                        if (e.resp_code == 0) {
                            that.initVisualInfo();
                        }
                    });
                }).catch(_ => {
                });

            },
            addnew() {
                if (this.addColumn == true){
                    this.$message.warning("请先保存当前组态")
                    return false;
                }
                this.addColumn = true;
                this.form= {
                    name: '',
                    seq: ''
                }
                this.form.keycode = null;
            },
            addnewLibrary() {
                if (this.addLibraryColumn==true){
                    this.$message.warning("请先保存当前图库")
                    return false;
                }
                this.addLibraryColumn = true;
                this.form= {
                    name: '',
                    seq: ''
                }
            },
            deleteVisual(rid) {
                var that = this;
                this.$confirm('确认删除？')
                    .then(_ => {
                        commonAjax("DELETE", baseurl + "yesiot/visual/display/delete/" + rid, "", function () {
                            // 重新查询一下
                            that.initVisualListInfo({id: id});
                        });
                    })
                    .catch(_ => {
                    });
            },
            deleteMoudelLibrary(rid) {
                var that = this;
                this.$confirm('确认删除？')
                    .then(_ => {
                        commonAjax("DELETE", baseurl + "yesiot/visual/moudle/library?id=" + rid, "", function () {
                            // 重新查询一下
                            that.activeNameImgKun1 = ''
                            that.initVisualMoudelLibraryListInfo();
                        });
                    })
                    .catch(_ => {
                    });
            },
            modifyInfo(id) {
                this.addColumn = true;
                for (var i = 0; i < this.visualList.length; i++) {
                    if (this.visualList[i].id == id) {
                        this.form.name = this.visualList[i].name;
                        this.form.seq = this.visualList[i].seq;
                        this.form.keycode = this.visualList[i].keycode;
                    }
                }
            },
            modifyInfoLibrary(id) {
                this.addLibraryColumn = true;
                for (var i = 0; i < this.visualMoudelLibraryList.length; i++) {
                    if (this.visualMoudelLibraryList[i].id === id) {
                        this.form = this.visualMoudelLibraryList[i];
                    }
                }
            },
            onSubmit() {
                // 提交
                var that = this;
                this.form.model = that.model;
                if (this.form.name==''||this.form.name==null){
                    this.$message.warning("组态名称不能为空")
                    return false;
                }

                if (this.form.keycode == null) {
                    console.log(this.form)
                    this.form.parentId = id;
                    /*this.form.sceneId = this.visualList[0].sceneId ;
          this.form.nodeId = this.visualList[0].nodeId ;*/
                    this.form.farmId = this.visualList[0].farmId;
                    this.form.greenHouseId = this.visualList[0].greenHouseId;
                    this.form.devCode = this.visualList[0].devCode;
                    this.form.isMould = this.visualList[0].isMould;
                    this.form.devModelId = this.visualList[0].devModelId;
                    this.form.disType = this.visualList[0].disType;
                    commonAjax('POST', baseurl + 'yesiot/visual/display/save', this.form, function (e) {
                        if (e) {
                            that.addColumn = false;
                            that.form.name = '';
                            that.form.seq = '';
                            // 重新查询一下
                            that.initVisualListInfo({id: id});
                        }
                    });
                } else {
                    commonAjax('PUT', baseurl + 'yesiot/visual/display/update/name/seq', this.form, function (e) {
                        if (e) {
                            that.addColumn = false;
                            that.form.name = '';
                            that.form.seq = '';
                            // 重新查询一下
                            that.initVisualListInfo({id: id});
                        }
                    });
                }
            },
            onSubmitLibrary() {
                // 提交
                var that = this;
                this.form.visualDisplayParentId = id;
                if (this.form.name==''||this.form.name==null){
                    this.$message.warning("图库名称不能为空")
                    return false;
                }
                commonAjax('POST', baseurl + 'yesiot/visual/moudle/library/save', this.form, function (e) {
                    if (e.resp_code == 0) {
                        that.addLibraryColumn = false;
                        // 重新查询一下
                        that.initVisualMoudelLibraryListInfo();
                    }
                });
            },
            textInput() {
                // 文本输入
                $(cfg.current_edit_obj).find(".canvas_text").html(this.edit_text);
            },

            fontSizeChange() {
                if (this.fontSize != '') {
                    $(cfg.current_edit_obj).css("font-size", this.fontSize);
                } else {
                    $(cfg.current_edit_obj).css("font-size", '');
                }
            },
            fontFamilyChange() {
                if (this.fontFamily != '') {
                    $(cfg.current_edit_obj).css("font-family", this.fontFamily);
                } else {
                    $(cfg.current_edit_obj).css("font-family", '');
                }
            },
            lineHeightChange() {
                if (this.lineHeight != '') {
                    $(cfg.current_edit_obj).css("line-height", this.lineHeight);
                } else {
                    $(cfg.current_edit_obj).css("line-height", '');
                }
            },
            textAlignChange() {
                if (this.textalign != '') {
                    $(cfg.current_edit_obj).css("text-align", this.textalign);
                } else {
                    $(cfg.current_edit_obj).css("text-align", '');
                }
            },
            fontWeightChange() {
                if ($(cfg.current_edit_obj).css("font-weight") == 700) {
                    $(cfg.current_edit_obj).css("font-weight", '400');
                } else {
                    $(cfg.current_edit_obj).css("font-weight", '700');
                }
            },
            obliqueChange() {
                if ($(cfg.current_edit_obj).css("font-style") != 'italic') {
                    $(cfg.current_edit_obj).css("font-style", 'italic');
                } else {
                    $(cfg.current_edit_obj).css("font-style", 'normal');
                }
            },
            underlineChange() {
                if ($(cfg.current_edit_obj).css("text-decoration").indexOf('none') > -1) {
                    $(cfg.current_edit_obj).css("text-decoration", 'underline');
                } else {
                    $(cfg.current_edit_obj).css("text-decoration", 'none');
                }
            },
            rotateChange() {
                var size = app.rotate;
                var cosVal = Math.cos(size * Math.PI / 180);
                var sinVal = Math.sin(size * Math.PI / 180);
                var valTransform = 'matrix(' + cosVal.toFixed(6) + ',' + sinVal.toFixed(6) + ',' + (-1 * sinVal).toFixed(6) + ',' + cosVal.toFixed(6) + ',0,0)';
                $(cfg.current_edit_obj).css("transform", "rotate(" + size + "deg)");
                // 重置滑块
                $("#rotate_node").slider({
                    value: size,
                });
            },
            rotateSpeedChange() {
                var size = app.rotate_speed;
                resetPipelineChartSpeedAndDir(size);
                // 重置滑块
                $("#rotate_speed").slider({
                    value: size,
                });
            },
            canswidthChange() {
                $(cfg.current_edit_obj).css("width", this.canswidth);
            },
            cansheightChange() {
                $(cfg.current_edit_obj).css("height", this.cansheight);
            },
            canvensxChange() {
                $(cfg.current_edit_obj).css("left", this.canvensx + "px");
            },
            canvensyChange() {
                $(cfg.current_edit_obj).css("top", this.canvensy + "px");
            },
            canvensxChangeImgTitle() {
                $(cfg.current_edit_obj).find('.img-title').css("left", this.canvensxImgTitle + "px")
            },
            canvensyChangeImgTitle() {
                $(cfg.current_edit_obj).find('.img-title').css("top", this.canvensyImgTitle + "px")
            },
            selectGuideClick(event) {
                if (this.guide == 1) {
                    this.guide = 0;
                    $(".guide").hide();
                } else {
                    this.guide = 1;
                    $(".guide").show();
                }
            },
            changeMode() {
                if (this.isdrag) {
                    this.isdrag = false;
                    $(".canvas_droppable").hide();
                } else {
                    this.isdrag = true;
                    $(".canvas_droppable").show();
                }
                console.log(this.isdrag)
            },
            canvensWidthChange() {
                // 宽度变化
                $(".edit-container").css("width", this.canvensWidth + "px");
            },
            canvensHeightChange() {
                // 高度变化
                $(".edit-container").css("height", this.canvensHeight + "px");
            },
            alarmEnable() {
                // 高度变化
                $(".edit-container").attr("alarmEnable", this.alarm_enable);
            },
            changetab(a) {
                this.tabmode = a;
                if (this.initUpload != 1 && a == 4) {
                    initImgUpload("upload_img");
                    this.initUpload = 1;
                }
            },
            addUploadImg(obj, id, visualMoudleLibraryId) {
                var uploadImgCount = this.uploadImgCount;
                this.uploadImgs.push({disImg: obj, id: id, visualMoudleLibraryId: visualMoudleLibraryId});
            },
            deleteImageSelect(index) {
                this.dattribute.splice(index, 1);
            },
            linkDelete(index) {
                this.linkAttribute.splice(index, 1);
            },
            saveEdit() {
                console.log(this.dattribute)
                let dattribute=this.dattribute
                for (let i = 0; i < dattribute.length; i++) {
                    dattribute[i].max=dattribute[i].min
                }
                cfg.current_edit_obj.attr("cmd", JSON.stringify(this.dattribute));
                this.dialogTableVisible = false;

                initControllerPart(cfg.current_edit_obj);
            },
            linkSave() {
                cfg.current_edit_obj.attr("cmd", JSON.stringify(this.linkAttribute));
                this.switchLinkDialogTableVisible = false;
                initSwitchLink(cfg.current_edit_obj);
            },
            addImageState() {
                // 增加一行
                this.dattribute.push({max: 0, min: 0, src: 'image/res/blank.png', send: 0,title:''});

            },
            addSwitchLinkRow() {
                // 增加一行
                this.linkAttribute.push({
                    is_num: true,
                    max: 0,
                    min: 0,
                    jty: 3,
                    jurl: '',
                    visual_select_code: '',
                    visual_select_width: 0,
                    visual_select_height: 0
                });
            },
            selectImg(obj) {
                this.dialogImageVisible = false;
                this.dattribute[this.tableIndex].src = obj;
            },
            changeChartData() {	//修改图表类型选择框
                var cid = this.cid;
                cfg.current_edit_obj.attr("cid", cid);
                resetNodeData();
            },
            settingmaxvalue() {
                // 设置最大值
                var cl = cfg.current_edit_obj;
                var optn = cl.children(".chartStyle").attr("option");
                var optnj = eval("(" + optn + ")");
                optnj.series[0].max = gdv(this.pimax, 100);
                var chart = getEchartObj();
                setChartOption(chart, optnj);
            },
            setSliderLength() {
                var cl = cfg.current_edit_obj;
                var handle = cl.find(".custom-slider-handle");
                $('#' + cl.attr("id") + " .slider_container").slider({
                    range: "min",
                    min: 0,
                    max: this.slider_length,
                    value: 0,
                    create: function () {
                        handle.text($(this).slider("value"));
                    },
                    slide: function (event, ui) {
                        handle.text(ui.value);
                    }

                });
                cl.find(".slider_container").attr("max_length", this.slider_length)
                handle.text("0");
            },
            changeSceneData() {	// 修改项目选择框

                if (this.model == "0") {
                    this.initGreenHouseIdList();
                } else if (this.model == "1") {
                    this.initSensorList()
                    this.initVideoList();
                }
            },
            showImageSelect(index) {
                this.dialogImageVisible = true;
                this.tableIndex = index;
            },
            funcedit() {
                // 功能设置
                this.dialogTableVisible = true;
            },
            switchLinkEdit() {
                // 条件跳转设置
                this.switchLinkDialogTableVisible = true;
            },
            changeChildSensorData(){
                let that = this;
                var sensor_id=this.sensor_id
                cfg.current_edit_obj.attr("sensor_id", sensor_id);
                if (this.nid == 5 && (this.cid == 1 || this.cid == 2)) {
                    cfg.current_edit_obj.attr("unit", that.childSensorMap[sensor_id].unit);
                }
                if (this.nid == 1 && (this.cid == 7 || this.cid == 11)) {
                    cfg.current_edit_obj.attr("childValueType", that.childSensorMap[sensor_id].ValueType);
                }
                if (this.nid == 9) {
                    cfg.current_edit_obj.attr("childValueType", that.sensorLMap[sensor_id].ValueType);
                }
                resetNodeData(sensor_id, 'sensor');
            },
            changeSensorData() {	//修改传感器选择框
                let that = this;
                var sensor_id_father = this.sensor_id_father;
                that.child_sensor=false;
                if (that.sensorLMap[sensor_id_father].ValueType==='struct'){
                    that.child_sensor=true;
                    cfg.current_edit_obj.attr("sensor_id_father", sensor_id_father);
                    that.sensor_id=''
                    cfg.current_edit_obj.removeAttr("sensor_id",);
                    this.initChildSensorList(sensor_id_father)
                }else{
                    cfg.current_edit_obj.attr("sensor_id", sensor_id_father);
                    cfg.current_edit_obj.attr("sensor_id_father", sensor_id_father);
                    resetNodeData(sensor_id_father, 'sensor');
                }
                if (this.nid == 5 && (this.cid == 1 || this.cid == 2)) {
                    cfg.current_edit_obj.attr("unit", that.sensorLMap[sensor_id_father].unit);
                }
                if (this.nid == 1 && (this.cid == 7 || this.cid == 11)) {
                    cfg.current_edit_obj.attr("valueType", that.sensorLMap[sensor_id_father].ValueType);
                }
                if (this.nid == 9) {
                    cfg.current_edit_obj.attr("valueType", that.sensorLMap[sensor_id_father].ValueType);
                }
            },
            changeVideoData() {	//修改摄像头选择框
                var video_id = this.video_id;
                cfg.current_edit_obj.attr("video_id", video_id);
                resetNodeData(video_id);
            },
            changeVideoWay() {	//修改摄像头选择框
                cfg.current_edit_obj.attr("video_way", this.video_way);
            },
            changeVideoType() {	//修改摄像头选择框
                cfg.current_edit_obj.attr("video_type", this.video_type);
            },
            changeVideoUrl() {	//修改摄像头选择框
                cfg.current_edit_obj.attr("video_url", this.video_url);
            },
            jumptype() {
                // 跳转方式变化
                cfg.current_edit_obj.attr("jty", this.jty);
            },
            linkJumpType(event, item, index) {
                // 跳转方式变化
                this.linkAttribute[index].jty = item.jty;
            },
            urlInput() {
                // url 输入变化
                cfg.current_edit_obj.attr("jurl", this.jurl);
            },
            linkInput(index, e) {
                // 条件跳转 url 输入变化
                this.linkAttribute[index].jurl = $(e.target).val();
            },
            urlInputSelect() {
                // visual_select_code
                cfg.current_edit_obj.attr("jurl", "./show.html?keyCode=" + this.visual_select_code);
                cfg.current_edit_obj.attr("code", this.visual_select_code);
            },
            linkSelect(event, item, index) {
                this.linkAttribute[index].jurl = "./show.html?keyCode=" + item.visual_select_code;
            },
            urlInputSelectWidth() {
                cfg.current_edit_obj.attr("width", this.visual_select_width);
            },
            urlInputSelectHeight() {
                cfg.current_edit_obj.attr("height", this.visual_select_height);
            },
            linkSelectWidth(index, e) {
                this.linkAttribute[index].width = $(e.target).val();
            },
            linkSelectHeight(index, e) {
                this.linkAttribute[index].height = $(e.target).val();
            },
            changeNodeData() {	//修改设备选择框
                var that = this;
                var node_id = that.node_id;
                cfg.current_edit_obj.attr("node_id", node_id);
                resetNodeData(node_id);
                that.initSensorList();
            },
            changeDeviceSlaveData() {
                this.deviceSlaveList = [];
                var device_slave_id = this.device_slave_id;
                cfg.current_edit_obj.attr("device_slave_id", device_slave_id);
                cfg.current_edit_obj.attr("isModbus", this.isModbus);
                resetNodeData(device_slave_id, 'device_slave_id');
                if (this.nid == 1 || this.nid == 5 || this.nid == 8 || this.nid == 9 || this.nid == 10) {
                    this.initSensorList();
                }
            },
            initSceneList() {
                var that = this;
                that.sceneList = [];
                commonAjax('GET', baseurl + 'api/project/projectList', {}, function (e) {
                    if (e.data) {
                        var data = e.data
                        that.sceneList = data;
                    } else {
                        that.sceneList = [];
                    }
                });
            },
            initChildSensorList(sensor_id_father) {
                let that=this
                that.childSensorMap.clear()
                that.childSensorList=[]
                let childSensorList=that.sensorLMap[sensor_id_father].Children
                for (let i = 0; i < childSensorList.length; i++) {
                    if (childSensorList[i].NotShow===false){
                        that.childSensorList.push(childSensorList[i])
                        that.childSensorMap[childSensorList[i].FieldName] = childSensorList[i];
                    }
                }
            },
            initSensorList(val) {	//初始化传感器
                var that = this;
                that.sensorListc12 = [];
                that.sensorListc11 = [];
                that.sensorListc7 = [];
                that.buttonList = [];
                console.log(getToken())
                if (that.model === "0") {
                    that.devCode = that.node_id;
                }
                commonAjax('GET', iotbaseurl + 'api/v1/dev/value?devCode=' + that.devCode, "", function (e) {
                    console.log(e)
                    if (e.Code === 0) {
                        var data = e.Data
                        that.sensorList = data;
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].NotShow==false){
                                that.sensorLMap[data[i].FieldName] = data[i];
                                if (data[i].DisplayType === 'button') {//按钮
                                    that.buttonList.push(data[i])
                                } else if (data[i].DisplayType === 'label') {//展示数据
                                    that.sensorListc12.push(data[i])
                                } else if (data[i].DisplayType === 'tab') {//配置数据
                                    that.sensorListc11.push(data[i])
                                } else if (data[i].DisplayType === 'time') {//时间
                                    that.sensorListc7.push(data[i])
                                } else if (data[i].DisplayType==='struct'){//复合节点
                                    that.buttonList.push(data[i])
                                    that.sensorListc12.push(data[i])
                                    that.sensorListc11.push(data[i])
                                    that.sensorListc7.push(data[i])
                                }
                            }
                        }
                    }
                });
            },
            initVideoList() {		//初始化摄像头
                var that = this;
                console.log(that.green_house_id)
                if (util.isEmpty(that.green_house_id)) {
                    return;
                }
                commonAjax('GET', iotbaseurl + 'api/v1/dev/list/' + that.green_house_id, '', function (e) {
                    if (e.Data) {
                        var data = e.Data
                        let j = 0;
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].IsIpc === 1) {
                                that.videoList[j] = data[i];
                                j++;
                            }
                        }
                    } else {
                        that.videoList = [];
                    }
                });
            },
            initGreenHouseIdList() {
                var that = this;
                if (util.isEmpty(that.farm_id)) {
                    that.greenHouseIdList = [];
                    return;
                }
                commonAjax('GET', iotbaseurl + 'api/v1/greenhouse/list/' + that.farm_id, '', function (e) {
                    if (e.Data) {
                        var data = e.Data
                        that.greenHouseIdList = data;
                    } else {
                        that.greenHouseIdList = [];
                    }
                });
            },
            initNodeList() {		//初始化设备
                var that = this;
                if (util.isEmpty(that.green_house_id)) {
                    that.nodeList = [];
                    return;
                }
                cfg.current_edit_obj.attr("green_house_id", that.green_house_id);
                commonAjax('GET', iotbaseurl + 'api/v1/dev/list/' + that.green_house_id, '', function (e) {
                    if (e.Data) {
                        var data = e.Data
                        that.nodeList = data;
                    } else {
                        that.nodeList = [];
                    }
                });
            },
            imgScale(val) {
                if (val == 0) {
                    // 原比例
                    cfg.current_edit_obj.children().addClass("normal");
                } else {
                    // 缩放
                    cfg.current_edit_obj.children().removeClass("normal");
                }
            },
            selectMouldVisual() {
                this.selectMould = true;
            },
            saveVisual() {		//保存组态
                cfg.removeNodeEvent($(".activeDrag"));
                cfg.groupDel();//删除组合
                this.isdrag = false;
                var that = this;
                var config = {//系统属性
                    zIndexT: cfg.zIndexT
                }
                let prop = $(navPage).prop("outerHTML");
                var param = {
                    keycode: keyCode,
                    loginText: that.loginText,
                    loginLogo: that.loginLogo,
                    content: $(navPage).prop("outerHTML"),
                    config: JSON.stringify(config)
                }
                if (keyCode == null) {
                    commonAjax('POST', baseurl + 'yesiot/visual/display/save', param, function (res) {
                        if (res) {
                            id = res.data.id;
                            keyCode = res.data.keycode;
                            that.index_html = prop
                            tip("保存成功");
                        }
                    });
                } else {
                    commonAjax('PUT', baseurl + 'yesiot/visual/display/update', param, function (res) {
                        if (res.resp_code === 0) {
                            that.index_html = prop
                            tip("保存成功");
                        }
                    });
                }
            },
            saveShare(share) {
                var that = this;
                commonAjax('POST', baseurl + 'api/visual/display/share', share, function (res) {
                    if (res != null && res != '') {
                        that.visualDisplayShareForm = res;
                        that.visualDisplayShareShow = true;
                    } else {
                        tip("组态分享失败")
                    }
                });
            },
            visualDisplayShareNeedSecret(value, e) {
                if (value) {
                    this.visualDisplayShareForm.secret = this.randomStr(6);
                } else {
                    this.visualDisplayShareForm.secret = null;
                }
                this.saveShare(this.visualDisplayShareForm)
            },
            visualDisplayShareClose(value, e) {
                this.visualDisplayShareForm.close = value;
                this.saveShare(this.visualDisplayShareForm)
            },
            copyLink(e) {
                navigator.clipboard.writeText(this.visualDisplayShareForm.url);
                tip("已复制");
            },
            copySecret(e) {
                navigator.clipboard.writeText(this.visualDisplayShareForm.secret == null ? '' : this.visualDisplayShareForm.secret);
                tip("已复制");
            },
            randomStr(len) {
                arr = 'abcdefghijklmnopqrstuvwxyzABCDEFJHIJKLMNOPQRSTUVWXYZ01234567890'
                var ans = '';
                for (var i = len; i > 0; i--) {
                    ans += arr[Math.floor(Math.random() * arr.length)];
                }
                return ans;
            },
            checkModel() {
                let that = this
                let prop = $(navPage).prop("outerHTML");
                if (prop != that.index_html) {
                    tip("请先保存后，再进行预览", 3000);
                    return ""
                }
                this.showVisual()
            },
            showVisual(code) {	//展示组态
                if (keyCode == null) {//
                    tip("请先保存后，再进行预览");
                    return;
                } else {
                    let codeVisual = keyCode
                    console.log(code)
                    if (code != null && code !== '') {
                        codeVisual = code;
                    }
                    let USER_MOBILE = localStorage.getItem("USER_MOBILE");
                    let PASSWORD = localStorage.getItem("PASSWORD");
                    let username = toCode(USER_MOBILE);
                    let password = toCode(PASSWORD);
                    window.open("./show.html?keyCode=" + codeVisual + "&text1=" + username + "&text2=" + password);
                }
            },
            initVisualInfo() {		//初始化组态数据 , 有id  keycode: keyCode ,
                if (keyCode != null) {
                    var that = this;
                    commonAjax('GET', baseurl + 'yesiot/visual/display?keycode=' + keyCode, "", function (e) {
                        console.log(e)
                        if (e) {
                            var data = e;
                            if (util.isNotEmpty(data.config)) {
                                var config = JSON.parse(data.config);
                                cfg.zIndexT = config.zIndexT;
                            } else {
                                cfg.zIndexT = 1;
                            }
                            that.visual_name = data.name;
                            that.isMould = data.isMould;
                            that.model = data.model;
                            that.type = data.type;
                            that.devCode = data.devCode;
                            if (data.parentId == null && data.content == null && data.model === "1") {
                                that.selectMould = true;
                            } else {
                                that.selectMould = false;
                            }
                            if (data.loginText != null && data.loginText != '') {
                                that.loginText = data.loginText
                            }
                            if (data.loginLogo != null && data.loginLogo != '') {
                                that.loginLogo = data.loginLogo
                            }
                            if (data.model === "1") {
                                that.initVisualSelectModel(data.devModelId)

                            }
                            if (data.content === '' || data.content == null) {
                                delete data.content;
                            }
                            that.index_html = data.content;
                            $(navPage).parent().html(data.content);
                            cfg.init();
                            reinitChartObj();
                            reInitSliderObj();
                            that.scene_id = data.sceneId;
                            that.farm_id = data.farmId;
                            that.green_house_id = data.greenHouseId;
                            that.changeSceneData();

                            var bg = $(".edit-container").attr("bg");
                            if (bg != null && bg != '') {
                                $(".edit-container").parent().css("background-color", bg);
                            }

                            var bgurl = $(".edit-container").attr("bgurl");
                            if (bgurl != null && bgurl != '') {
                                $(".edit-container").parent().css("background", "url(" + bgurl + ")  no-repeat ");
                                $(".edit-container").parent().css("background-position", "center top");
                            }

                            if (data.parentId == null) {
                                id = data.id;
                                that.id = data.id;
                            }
                            that.initVisualMoudelLibraryListInfo();
                            that.handleChange()
                            that.initVisualListInfo({id: id});
                            if (data.disType == 1 && (data.content == null || data.content == '')) {
                                that.canvensWidth = parseInt(that.canvensHeight / 1.7778);
                                that.canvensWidthChange();
                            }
                            // 根据画布宽高，初始化值
                            if (data.content != null && data.content != '') {
                                setTimeout(function () {
                                    app.canvensHeight = $(".edit-container").height();
                                    app.canvensWidth = $(".edit-container").width();
                                }, 100);
                            }


                        }
                    });
                }
            },
            initVisualSelectModel(devModelId) {
                // 获取组件类型
                var that = this;
                return new Promise((resolve, reject) => {
                    commonAjax('GET', baseurl + 'yesiot/visual/display/list/dev/model/id/' + devModelId, "", function (res) {
                        console.log(res)
                        if (res.resp_code == 0) {
                            resolve(res)
                        }
                    });
                }).then(res => {
                    that.initVisualSelectModelList.push(...res.datas);
                    return new Promise(resolve => {
                        commonAjax("POST", baseurl + 'yesiot/visual/display/dev/code/list', {devCodeList: devCodeList}, function (res) {
                            if (res.resp_code == 0) {
                                resolve(res)
                            }
                        })
                    })
                }).then(res => {
                    that.initVisualSelectModelList.push(...res.datas);
                    let obj = {}
                    let modelList = that.initVisualSelectModelList.reduce(function (preValue, item) {
                        obj[item.keycode] ? '' : obj[item.keycode] = true && preValue.push(item);
                        return preValue
                    }, [])//将返回值的初始值定义为空数组
                    that.initVisualSelectModelList = modelList.filter(item => item.keycode != keyCode)
                    console.log(that.initVisualSelectModelList);
                })

            },
            initVisualPart() {
                // 获取组件类型
                var that = this;
                /*	                commonAjax('GET', baseurl+'service/dictionary/130' , "" ,function (res) {
                    if(isOK(res)){
                                   that.visualPartList = res.data ;
                                }
                            }) ;*/
            },
            initVisualListInfo(data) {
                var that = this;
                commonAjax('GET', baseurl + 'yesiot/visual/display/sub/all?id=' + id, '', function (res) {
                    if (res) {
                        that.visualList = res;
                    }
                });
            },
            initVisualMoudelLibraryListInfo() {
                var that = this;

                commonAjax('GET', baseurl + 'yesiot/findVisualMoudelLibrary?parentId=' + id, '', function (res) {
                    if (res.resp_code == 0) {
                        that.visualMoudelLibraryList = res.datas;
                    }
                });
            },
            clearBgImg() {
// 					$(".edit-container").removeAttr("bgurl") ;
                $(".edit-container").css("background", "");
//        				$(".edit-container").parent().css("background-position","") ;
            },
            chartMaxInput() {
                // 输入最大值
                var cl = cfg.current_edit_obj;
                cl.attr("max", this.chartMax);
            },
            chartTextTitle() {
                // 输入最大值
                var cl = cfg.current_edit_obj;
                cl.attr("textTitle", this.textTitle);
            },
            changeChartColumn() {
                // 增加边框
                var cl = cfg.current_edit_obj;
                var nid = cl.attr("nid");
                var cid = cl.attr("cid");
                var optnj = eval("(" + cl.children(".chartStyle").attr("option") + ")");
                if (this.columnVal == 0) {
                    optnj.series[0].outline.show = false;
                } else if (this.columnVal == 1) {
                    optnj.series[0].outline.show = true;
                }
                setChartOption(getEchartObj(), optnj);
            }
        },
        created() {

        },
        mounted() {
            this.loginOut();
            $("#app").show();
            setTimeout(function () {
                layer.closeAll();
                $(".guide").show();
            }, 1000);
            this.guide = 1;

            this.initVisualInfo();
            //查找项目
            //this.initSceneList();
            this.initVisualPart();
            $(".left-container").height($(window).height() - 60);
            $(".element-container").height($(window).height() - 80);
            this.canvensHeight = $(window).height() - 60;
            this.canvensWidth = $(".el-main").width() - 275;
            this.canvensWidthChange();
            this.canvensHeightChange();
            this.alarmEnable();
            $(".el-main, #edit-content-area").height(this.canvensHeight);
            $(".el-tabs__content").css("max-height", $(window).height() - 100);
            // 浏览器尺变化
            /* window.addEventListener('resize', function(){
$(".left-container").height($(window).height()-60);
$(".element-container").height($(window).height()-80);
app.canvensHeight = $(window).height()-80;
app.canvensWidth = $(".el-main").width()-240;
app.canvensWidthChange();
app.canvensHeightChange();
$(".el-main,#edit-content-area").height(app.canvensHeight);
}) */
            // 背景图上传更新
            initBgImgUpload("upload_img_bg");
            initImgLoginUpload("upload_img_logo");

            // 背景颜色
            initColorSelect("#backcolor", function (color) {
                var hexColor = "transparent";
                if (color) {
                    hexColor = color.toRgbString();
                }
                if (!$(cfg.current_edit_obj).hasClass("edit-container")) {
                    $(cfg.current_edit_obj).css("background-color", hexColor);
                }
            }, function () {
            });

            initColorSelect("#backContainercolor", function (color) {
                var hexColor = "transparent";
                if (color) {
                    hexColor = color.toRgbString();
                }
                if (cfg.current_edit_obj == null || cfg.current_edit_obj == '') {
                    cfg.current_edit_obj = $(navPage)[0];
                }
                //处理特殊bug , 将背景色放到上一级上
                $(cfg.current_edit_obj).parent().css("background-color", hexColor);
                $(cfg.current_edit_obj).attr("bg", hexColor);
            }, function () {
            });

            initColorSelect("#canvasContainercolor", function (color) {
                var hexColor = "transparent";
                if (color) {
                    hexColor = color.toRgbString();
                }
                //处理特殊bug , 将背景色放到上一级上
                $(".edit-container").css("background-color", hexColor);

            }, function () {
            });

            //单击素材
            $(document).delegate(".canvas", "click", function (event) {
                hideMouseMenu();
                var event = event || window.event;
                if (event && event.stopPropagation) {
                    event.stopPropagation();    // W3C标准
                } else {
                    event.cancelBubble = true;  //ie678
                }
                if ($(this).hasClass("textEditActive") || cfg.inGroup($(this))) {
                    return;
                }
                $(cfg.current_edit_obj).find(".w-e-text").attr('contenteditable', false);
                app.nid = $(this).attr("nid");
                cfg.enterEditStatus($(this)); //进入编辑状态
            })

            // 删除数据
            $(document).delegate(".deleteUploadImg", "click", function (event) {
                var that = $(this);
                let id = $(this).attr("id");
                commonAjax('DELETE', baseurl + 'yesiot/moudle/visual?id=' + id, '', function (res) {
                    if (res.resp_code === 0) {
                        // 删除成功
                        that.parent().parent().parent().remove();
                        for (let i = 0; i <app.uploadImgs.length ; i++) {
                            if (app.uploadImgs[i].id===id){
                               app.uploadImgs.splice(i,1)
                            }
                        }
                    }
                });
            });
            //双击素材
            $(document).delegate(".canvas", "dblclick", function (event) {
                hideMouseMenu();
                var nid = $(this).attr("nid");
                switch (nid) {
                    case "3":	//高级文本
                        cfg.hideDraggableEvent($(this));	//移除拖动
                        $(this).addClass("textEditActive");
                        $(this).find(".w-e-text").attr('contenteditable', true);//启动编辑
                        break;
                }
            })

            // 编辑区点击 - 转移到鼠标按下事件内
            $(document).delegate(navPage, "click", function (event) {
                //hideMouseMenu();
                //app.editType = -1 ;
                //cfg.removeNodeEvent($(".activeDrag"));
                //cfg.enterEditStatus($(this)); //进入编辑状态
            });

            //输入框动态更新旋转角度
            $("#rotate_node").slider({
                range: "max",
                min: 0,
                max: 360,
                value: 0,
                slide: function (event, ui) {
                    var size = ui.value;
                    app.rotate = size;
                    var cosVal = Math.cos(size * Math.PI / 180);
                    var sinVal = Math.sin(size * Math.PI / 180);
                    var valTransform = 'matrix(' + cosVal.toFixed(6) + ',' + sinVal.toFixed(6) + ',' + (-1 * sinVal).toFixed(6) + ',' + cosVal.toFixed(6) + ',0,0)';
                    $(cfg.current_edit_obj).css("transform", "rotate(" + size + "deg)");
                }
            });
            //输入框动态更新旋转角度
            $("#rotate_speed").slider({
                range: "max",
                min: 0,
                max: 360,
                value: 0,
                slide: function (event, ui) {
                    var size = ui.value;
                    app.rotate_speed = size;
                    resetPipelineChartSpeedAndDir(size);
                }
            });
            // 初始化字体颜色框
            initColorSelect("#basicColor", function (color) {
                var hexColor = "transparent";
                if (color) {
                    hexColor = color.toRgbString();
                }
                //处理特殊bug
                if (!$(cfg.current_edit_obj).hasClass("edit-container")) {
                    $(cfg.current_edit_obj).css("color", hexColor);
                }
                // 这里对svg组件，特殊处理
                var cl = cfg.current_edit_obj;
                var nid = cl.attr("nid");
                var cid = cl.attr("cid");
                if (nid == 2 && (cid == 8 || cid == 9)) {
                    var sc = cl.find("rect,line,circle,g,path,g");
                    for (var i = 0; i < sc.length; i++) {
                        if (util.isNotEmpty(sc.eq(i).attr("fill")) && sc.eq(i).attr("fill") != 'none') {
                            sc.eq(i).attr("fill", hexColor);
                        }
                        if (util.isNotEmpty(sc.eq(i).attr("stroke")) && sc.eq(i).attr("stroke") != 'none') {
                            sc.eq(i).attr("stroke", hexColor);
                        }
                    }
                } else if (nid == 5 && cid < 3) {
                    var optn = cl.children(".chartStyle").attr("option");
                    var optnj = eval("(" + optn + ")");
                    $.extend(true, optnj, {
                        xAxis: {
                            axisLine: {
                                lineStyle: {
                                    color: hexColor
                                }
                            }
                        },
                        yAxis: {
                            axisLine: {
                                lineStyle: {
                                    color: hexColor
                                }
                            }
                        }
                    });
                    var chart = getEchartObj();
                    setChartOption(chart, optnj);
                } else if (nid == 5 && cid == 3) {
                    var optn = cl.children(".chartStyle").attr("option");
                    var optnj = eval("(" + optn + ")");
                    optnj.series[0].axisLabel = {
                        textStyle: {
                            color: hexColor
                        }
                    };
                    optnj.series[0].title = {
                        textStyle: {
                            color: hexColor
                        }
                    };
                    var chart = getEchartObj();
                    setChartOption(chart, optnj);
                } else if (nid == 5 && cid == 4) {
                    var optn = cl.children(".chartStyle").attr("option");
                    var optnj = eval("(" + optn + ")");
                    optnj.series[0].color = ['rgba(' + color._r + ', ' + color._g + ', ' + color._b + ', 0.5)'];
                    var chart = getEchartObj();
                    setChartOption(chart, optnj);
                }
            });

            /*====================== 自定义右键菜单 ======================*/
            //编辑区 - 转移到鼠标按下事件内
            $(".el-container").on("contextmenu", navPage, function (ev) {
                return false;
            });
            //编辑区 素材
            $(".el-container").on("contextmenu", ".canvas", function (ev) {
                if (cfg.inGroup($(this))) {//元素在组合内
                    return;
                }
                var oEvent = ev || event;
                //自定义的菜单显示
                hideMouseMenu();
                var menu = $("#opration");
                menu.show();
                //让自定义菜单随鼠标的箭头位置移动
                menu.css("left", oEvent.clientX + "px");
                menu.css("top", oEvent.clientY + "px");
                //素材进入编辑状态
                var obj = $(this);
                cfg.enterEditStatus(obj); //进入编辑状态
                if (obj.attr("nid") == 7) {//组合的菜单只有删除功能
                    $("#downMoveOne").addClass("item_disabled");
                    $("#downMoveAll").addClass("item_disabled");
                    $("#copyNode").addClass("item_disabled");
                    $("#upMoveOne").addClass("item_disabled");
                    $("#upMoveAll").addClass("item_disabled");
                } else {
                    $("#downMoveOne").removeClass("item_disabled");
                    $("#downMoveAll").removeClass("item_disabled");
                    $("#copyNode").removeClass("item_disabled");
                    $("#upMoveOne").removeClass("item_disabled");
                    $("#upMoveAll").removeClass("item_disabled");
                }
                //是否可以上移下移
                checkCoincide($(this));
                return false;
            });
            //禁止页面点击
            document.oncontextmenu = function () {
                return false;
            }

            //隐藏鼠标右键菜单
            function hideMouseMenu() {
                $("#oprationEdit").hide();//隐藏编辑区菜单
                $("#opration").hide();//隐藏素材菜单
            }

            //菜单左对齐
            $(".dir_operate").click(function () {
                changeConAlign(cfg.current_edit_obj, $(this).attr("tag"));
                hideMouseMenu();
            })
            //菜单复制
            $("#copyNode").click(function () {
                if ($(this).hasClass("item_disabled")) {//禁止点击
                    return;
                }
                cfg.clone_obj = $(cfg.current_edit_obj)[0];
                hideMouseMenu();
            })
            //菜单下移一层
            $("#downMoveOne").click(function () {
                if ($(this).hasClass("item_disabled")) {//没有粘贴对象
                    return;
                }
                changeNodeIndex(cfg.current_edit_obj, "down");
                checkCoincide(cfg.current_edit_obj);
            })
            //菜单下移底层
            $("#downMoveAll").click(function () {
                if ($(this).hasClass("item_disabled")) {//没有粘贴对象
                    return;
                }
                changeNodeIndex(cfg.current_edit_obj, "down", true);
                checkCoincide(cfg.current_edit_obj);
            })
            //菜单上移一层
            $("#upMoveOne").click(function () {
                if ($(this).hasClass("item_disabled")) {//没有粘贴对象
                    return;
                }
                changeNodeIndex(cfg.current_edit_obj, "up");
                checkCoincide(cfg.current_edit_obj);
            })
            //菜单上移顶层
            $("#upMoveAll").click(function () {
                if ($(this).hasClass("item_disabled")) {//没有粘贴对象
                    return;
                }
                changeNodeIndex(cfg.current_edit_obj, "up", true);
                checkCoincide(cfg.current_edit_obj);
            })
            //菜单粘贴
            $("#pasteNode").click(function () {
                if ($(this).hasClass("item_disabled")) {//没有粘贴对象
                    return;
                }
                var x1 = $(this).offset().top;
                var y1 = $(this).offset().left;
                var x2 = $(navPage).offset().top;
                var y2 = $(navPage).offset().left;
                var obj = $(cfg.clone_obj).clone();
                if ($(cfg.clone_obj).attr("nid") == 3) {
                    // 复制高级文本
                    var obj = $(".high-txt").clone();
                }
                obj.appendTo($(navPage));//进入编辑区
                obj.removeClass("high-txt");
                cfg.generateNewNode(obj, {
                    "top": x1 - x2 + "px",
                    "left": y1 - y2 + "px"
                });
                cfg.enterEditStatus(obj); //进入编辑状态
                hideMouseMenu()
            })
            //菜单删除
            $("#deleteNode").click(function () {
                if (util.isNotEmpty(cfg.current_edit_obj) && !cfg.current_edit_obj.hasClass("edit-container")) {
                    cfg.current_edit_obj.remove();
                    hideMouseMenu();
                }
            })
            //键盘监听
            $(document).keydown(function (event) {
                let that = this;
                var key = event.keyCode;
                if (key == "46") {
                    $("#deleteNode").click();
                } else if (key == "37") {//左
                    let left = $(cfg.current_edit_obj).css("left").split("px");
                    $(cfg.current_edit_obj).css("left", (parseInt(left[0]) - 1) + "px");
                } else if (key == "39") {//右
                    let left = $(cfg.current_edit_obj).css("left").split("px");
                    $(cfg.current_edit_obj).css("left", (parseInt(left[0]) + 1) + "px");
                } else if (key == "38") {//上
                    let top = $(cfg.current_edit_obj).css("top").split("px");
                    $(cfg.current_edit_obj).css("top", (parseInt(top[0]) - 1) + "px");
                } else if (key == "40") {//下
                    let top = $(cfg.current_edit_obj).css("top").split("px");
                    $(cfg.current_edit_obj).css("top", (parseInt(top[0]) + 1) + "px");
                }
            });
            //拖动选中元素事件
            $(document).on('mousedown', navPage, function (eventDown) {
                var key = eventDown.which; //获取鼠标键位
                if (key == 1) {  //如果鼠标左键按下
                    var target = $(eventDown.target);
                    //如果有选中区域。未进行组合则删除
                    if ($(navPage).find(".tempGroup").length != 0) {
                        if (target.closest(".tempGroup").length == 0) {
                            cfg.groupDel();
                        }
                    }
                    hideMouseMenu();
                    if (target.closest(".canvas").length == 0) {
                        app.editType = -1;
                        cfg.removeNodeEvent($(".activeDrag"));
                    }
                    //判断点击相关素材不可执行
                    if (target.closest(".canvas").not(".Locking").length == 0) {
                        //  创建选框节点
                        var $selectBoxDashed = $('<div class="selectBox" id="selectBox"></div>');
                        $("body").append($selectBoxDashed);
                        // 设置选框的初始位置
                        var startX = eventDown.pageX || eventDown.offsetX;
                        var startY = eventDown.pageY || eventDown.offsetY;
                        $selectBoxDashed.css
                        ({
                            left: startX,
                            top: startY
                        });
                        //根据鼠标移动，设置选框宽高
                        var __x = null;
                        var __y = null;
                        //监听鼠标移动事件
                        $(document).on('mousemove', function (eventMove) {
                            //根据鼠标移动，设置选框的位置、宽高
                            __x = eventMove.pageX || eventMove.offsetX;
                            __y = eventMove.pageY || eventMove.offsetY;
                            // 暂存选框的位置及宽高，用于将 选中
                            var __left = Math.max(__x, startX);
                            var minLeft = Math.min(__x, startX);
                            var __top = Math.max(__y, startY);
                            var minTop = Math.min(__y, startY);
                            var __width = Math.abs(__x - startX);
                            var __height = Math.abs(__y - startY);
                            $selectBoxDashed.css(
                                {
                                    left: minLeft,
                                    top: minTop,
                                    width: __width,
                                    height: __height
                                });
                            //  遍历容器中的选项，进行选中操作
                            $(navPage + "> .canvas").removeClass('is-selected');
                            $(navPage + "> .canvas").not(".Locking").each(function () {
                                var $item = $(this);
                                var itemX_pos = $item.prop('offsetWidth') + $item.offset().left;
                                var itemY_pos = $item.prop('offsetHeight') + $item.offset().top;
                                //判断添加以及删除
                                var condition1 = itemX_pos <= __left;
                                var condition2 = itemY_pos <= __top;
                                var condition3 = $item.offset().left >= minLeft;
                                var condition4 = $item.offset().top >= minTop;
                                if (condition1 && condition2 && condition3 && condition4) {
                                    $item.addClass('is-selected');
                                } else {
                                    $item.removeClass('is-selected');
                                }
                            });
                        });
                        $("body").one('mouseup', function () {
                            cfg.current_edit_obj = null;
                            app.editType = -1;
                            app.nid = -1;
                            //鼠标按键抬起删除鼠标移动事件
                            $(document).off('mousemove');
                            $selectBoxDashed.remove();
                            var shu = $(navPage).children(".is-selected").length;
                            if (shu > 1) {
                                //预添加组合
                                var arrayGroup = [];
                                var kLeft = $(navPage).offset().left - 1;
                                var kTop = $(navPage).offset().top - 1;
                                $(navPage).children(".is-selected").each(function (index) {
                                    var offset = $(this).offset();
                                    var Nheight = $(this).height();
                                    var Nwidth = $(this).width();
                                    var NTop = offset.top - kTop;
                                    var Nleft = offset.left - kLeft;
                                    arrayGroup.push([Nleft, NTop, Nwidth, Nheight]);
                                    if ((index + 1) == shu) {
                                        $(navPage).children(".is-selected").wrapAll('<div class="canvas tempGroup canvasId" nid="7" Lid="0"><div class="canvas-con"></div></div>');//添加组合前
                                        var minLeft = -1;//获取最小left偏移量
                                        var minTop = -1;//计算top偏移量和高
                                        var maxWidth = [];//计算宽度
                                        var maxHeight = [];//计算高度
                                        for (var LT = 0; LT < arrayGroup.length; LT++) {
                                            //获取最小left
                                            if (minLeft > arrayGroup[LT][0] || minLeft === -1) {
                                                minLeft = arrayGroup[LT][0];
                                            }
                                            //获取最小top
                                            if (minTop > arrayGroup[LT][1] || minTop === -1) {
                                                minTop = arrayGroup[LT][1];
                                            }
                                            //计算宽高
                                            if ((LT + 1) == arrayGroup.length) {
                                                //计算宽
                                                for (var W = 0; W < arrayGroup.length; W++) {
                                                    var wid = (arrayGroup[W][0] + arrayGroup[W][2]) - minLeft;
                                                    maxWidth.push(wid);
                                                }
                                                //计算高
                                                for (var H = 0; H < arrayGroup.length; H++) {
                                                    var hei = (arrayGroup[H][1] + arrayGroup[H][3]) - minTop;
                                                    maxHeight.push(hei);
                                                }
                                            }
                                        }
                                        var MaxW = (Math.max.apply(null, maxWidth));
                                        var MaxH = (Math.max.apply(null, maxHeight));
                                        //布局
                                        var Width = MaxW;//parseInt(MaxW);
                                        var newLeft = minLeft;//parseInt(minLeft);
                                        var height = MaxH;//parseInt(MaxH);
                                        var newTop = minTop;//parseInt(minTop);
                                        var zIndexT = cfg.zIndexT;
                                        cfg.zIndexT = zIndexT + 1;
                                        $(navPage + "> .tempGroup").css(
                                            {
                                                "top": newTop,
                                                "left": newLeft,
                                                "width": Width,
                                                "height": height,
                                                "z-index": zIndexT,
                                            });
                                        //初始化拖动
                                        cfg.activeCommonNode($(navPage + "> .tempGroup"));
                                        /*从新计算选中元素宽高*/
                                        $(navPage + "> .tempGroup").find(".is-selected").each(function (index) {
                                            if (index == 0) {
                                                $(this).addClass("Equal");
                                            }
                                            var thisTop = $(this).css("top").replace(/[a-z]/g, "");
                                            var thisLeft = $(this).css("left").replace(/[a-z]/g, "");
                                            var Top = Number(thisTop) - Number(newTop) + "px";
                                            var Left = Number(thisLeft) - Number(newLeft) + "px";
                                            $(this).css({"top": Top, "left": Left});
                                            $(this).addClass("resiz_canvas");
                                            $(this).removeClass("is-selected");
                                            //$(this).draggable("destroy");//禁止拖动
                                        });
                                        //有时候会出现选中全页面文字。
                                        $(".el-container").focus();
                                        $(".el-container").click();
                                    }
                                });
                            }
                        });
                    }
                } else if (key == 3) {
                    var oEvent = eventDown || event;
                    //自定义的菜单显示
                    hideMouseMenu();
                    //如果存在可粘贴对象则可粘贴
                    if (cfg.clone_obj != null && cfg.clone_obj != '') {
                        $("#pasteNode").removeClass("item_disabled");
                    } else {
                        return false;
                    }
                    var menu = $("#oprationEdit");
                    menu.show();
                    $("#opration").hide();//隐藏另一个菜单
                    //让自定义菜单随鼠标的箭头位置移动
                    menu.css("left", oEvent.clientX + "px");
                    menu.css("top", oEvent.clientY + "px");
                    cfg.removeNodeEvent($(".activeDrag"));
                }
            });

            //检查是否存在重合  比当前素材优先级高的
            function checkCoincide(obj) {
                var left = obj.prop('offsetLeft');
                var top = obj.prop('offsetTop');
                var width = obj.prop('offsetWidth');
                var height = obj.prop("offsetHeight");
                var zIndex = obj.css("z-index");
                var up_flag = false;//可以上移
                var down_flag = false;//可以下移
                //除了当前选择素材之外的素材 有没有重合的
                $(".canvas").not(".activeDrag").each(function () {
                    var zIndexO = $(this).css("z-index");
                    var leftO = $(this).prop('offsetLeft');
                    var topO = $(this).prop('offsetTop');
                    var widthO = $(this).prop('offsetWidth');
                    var heightO = $(this).prop("offsetHeight");
                    var conditionL = leftO + widthO < left;//左边
                    var conditionT = topO + heightO < top;//上面
                    var conditionR = leftO > left + width;//右边
                    var conditionB = topO > top + height;//下面
                    if (conditionL || conditionT || conditionR || conditionB) {//没有重合
                    } else {//重合
                        if (zIndexO > zIndex) {
                            down_flag = true;
                        } else if (zIndexO < zIndex) {
                            up_flag = true;
                        }
                    }
                })
                if (down_flag) {
                    $("#upMoveOne").removeClass("item_disabled");
                    $("#upMoveAll").removeClass("item_disabled");
                } else {
                    $("#upMoveOne").addClass("item_disabled");
                    $("#upMoveAll").addClass("item_disabled");
                }
                if (up_flag) {
                    $("#downMoveOne").removeClass("item_disabled");
                    $("#downMoveAll").removeClass("item_disabled");
                } else {
                    $("#downMoveOne").addClass("item_disabled");
                    $("#downMoveAll").addClass("item_disabled");
                }
            }

            //改变元素层级  type:1、up 上移 2、down 下移 ，isMax  是否到最底或者最顶层    true为是
            function changeNodeIndex(obj, type, isMax) {
                var left = obj.prop('offsetLeft');
                var top = obj.prop('offsetTop');
                var width = obj.prop('offsetWidth');
                var height = obj.prop("offsetHeight");
                var zIndex = obj.css("z-index");
                var up_arr = new Array();//可以上移
                var down_arr = new Array();//可以下移
                //除了当前选择素材之外的素材 有没有重合的
                $(".canvas").not(".activeDrag").each(function () {
                    var zIndexO = $(this).css("z-index");
                    var leftO = $(this).prop('offsetLeft');
                    var topO = $(this).prop('offsetTop');
                    var widthO = $(this).prop('offsetWidth');
                    var heightO = $(this).prop("offsetHeight");
                    var conditionL = leftO + widthO < left;//左边
                    var conditionT = topO + heightO < top;//上面
                    var conditionR = leftO > left + width;//右边
                    var conditionB = topO > top + height;//下面
                    if (conditionL || conditionT || conditionR || conditionB) {//没有重合
                        ;
                    } else {//重合
                        if (zIndexO > zIndex) {
                            var sub = [zIndexO, $(this)];
                            up_arr.push(sub);
                        } else if (zIndexO < zIndex) {
                            var sub = [zIndexO, $(this)];
                            down_arr.push(sub);
                        }
                    }
                })
                if (type == "up") {
                    var arrayObj = up_arr;
                    arrayObj.sort(function (a, b) {
                        return a[0].localeCompare(b[0])
                    })
                    if (isMax == true) {//自己置为最大，比原来的自己大的-1
                        var own_index = parseInt(obj.css("z-index"));
                        var max_index = arrayObj[arrayObj.length - 1][0];
                        obj.css("z-index", max_index);
                        $(".canvas").not(".activeDrag").each(function () {
                            var index = parseInt($(this).css("z-index"));
                            if (index > own_index) {
                                $(this).css("z-index", index - 1);
                            }
                        })
                    } else {
                        var tempIndex;
                        var tempObj;
                        tempIndex = arrayObj[0][0];
                        tempObj = arrayObj[0][1];
                        obj.css("z-index", tempIndex);
                        tempObj.css("z-index", zIndex);
                    }
                } else if (type == "down") {
                    var arrayObj = down_arr;
                    var tt = arrayObj.sort(function (a, b) {
                        return b[0].localeCompare(a[0])
                    })
                    if (isMax == true) {//自己置为1，比原来的自己大的+1
                        var own_index = parseInt(obj.css("z-index"));
                        //var max_index = arrayObj[arrayObj.length-1][0];
                        obj.css("z-index", 1);
                        $(".canvas").not(".activeDrag").each(function () {
                            var index = parseInt($(this).css("z-index"));
                            if (index < own_index) {
                                $(this).css("z-index", index + 1);
                            }
                        })
                    } else {
                        var tempIndex;
                        var tempObj;
                        tempIndex = arrayObj[0][0];
                        tempObj = arrayObj[0][1];
                        obj.css("z-index", tempIndex);
                        tempObj.css("z-index", zIndex);
                    }
                }
            }

            //改变组合框内元素方向
            function changeConAlign(obj, dir) {
                var canvas = obj.find(".canvas");
                if (dir == 0) {
                    canvas.css("top", 0);
                    canvas.css("bottom", '');
                } else if (dir == 1) {//left组合框宽度减去元素自身宽度
                    var w = obj.width();
                    for (var i = 0; i < canvas.length; i++) {
                        var canva = canvas[i];
                        $(canva).css("left", w - $(canva).width() + "px");
                    }
                } else if (dir == 2) {
                    var h = obj.height();
                    for (var i = 0; i < canvas.length; i++) {
                        var canva = canvas[i];
                        $(canva).css("top", h - $(canva).height() + "px");
                    }
                } else if (dir == 3) {
                    canvas.css("left", 0);
                    canvas.css("right", '');
                }
            }
        }
    })
    let clipboard = new ClipboardJS('.copyBtn');
    clipboard.on('success', function (e) {
        this.tip("复制成功")
    });
    clipboard.on('error', function (e) {
        this.tip("复制失败")
    });
    window.onbeforeunload = function (e) {
        e = e || window.event;
        // 兼容IE8和Firefox 4之前的版本
        if (e) {
            e.returnValue = '关闭提示';
        }
        // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
        return '关闭提示';
    };
</script>
</html>
